Default menu selection on page load

Question

I have a view, which contains a menu and a directive. I would like to have the first item from the menu selected on page load, this then populates the contents of the directive.

As the contents of the menu is loaded from a server file and changes frequently, I don't think I can use a default route, because the route would change name each time the file changed.

events.html

<ul>
   <li ng-repeat="event in events"><a href="#/{{event.title}}">{{event.title}}</a></li>
</ul>

The following list items gets loaded dynamically on page load, but I have shortened it for brevity to load events in-line.

controller.js

 myApp.controller('controller', ['$scope',function($scope){    
   $scope.events = {title: 'event 1', title: 'event 2'};
 }]);

I'd like to have a menu item selected by default when the page loads, such as $scope.events[0].

Answer 1

There is duplication of key in '$scope.events' . I think it should be array of objects.

This might work:

$scope.$watch('events', function(newVal, oldVal){
    if(newVal.length){
        $scope.selected=$scope.events[0];
    }
});