Choosing a default menu when loading a page

Question

I have a view containing a menu and a directive. I would like to have the first item from the menu selected when the page loads, and then fills the contents of the directive.

Since the contents of the menu are loaded from the server file and changed frequently, I don’t think I can use the default route, because the route will change every time the file changes.

events.html

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

The following list items are loaded dynamically when the page loads, but I shortened it for brevity to load events in a row.

controller.js

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

I want the menu item to be selected by default when the page loads, for example $ scope.events [0].

Answer 1

'$ scope.events'. , .

:

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