javascript - How do I get ng-select to update when scope is changed? -

i have table above form, when row selected populates form data. form has select element. upon first row in table being selected, data populates correctly , correct selected option shown. on second , subsequent selection correct selected option not shown. in chrome dev tools can see values update properly, not visually shown.

what missing? how correct option visually shown?

<select name="updatecategory" ng-model="selectedpermission.permission.category_id">        <option value="{{cat.id}}" ng-selected="cat.selected" ng-repeat="cat in selectedpermission.permission_categories">               {{cat.name}}        </option> </select> 

here function in controller updating scope.

         $rootscope.$watch('toolbarselectedvalue',function(){             if($rootscope.toolbarselectedvalue >0){                 permissions.getitem($rootscope.toolbarselectedvalue).then(function(res){                     var pc = res.data.permission_categories;                     var p = res.data.permission;                     angular.foreach(pc,function(v,k){                         if(v.id == p.category_id){                             pc[k].selected = true;                         }else{                             pc[k].selected = false;                         }                     });                     $scope.selectedpermission = {"permission":p,"permission_categories":pc};                     $scope.$apply();                 });             }else if($rootscope.toolbarselectedvalue == 0 || $rootscope.toolbarselectedvalue == null){                 $scope.selectedpermission = {};             }         }); 

i use ng-options opposed <option...></option> can relate selection ng-model easily. see docs more info.

something like:

<select name="updatecategory" ng-model="cat" ng-options="cat.id cat.name cat in selectedpermission.permission_categories"> </select> 

bear in mind not sure of data structure, should on way.