Angularjs select list not initialize default value -

i have 2 select lists:

<select class="input-large" ng-model="bu.box.categoryid" ng-change="getsubcats()">    <option ng-repeat="cat in cats" value="{{cat.id}}">{{cat.name}}</option> </select>   <select class="input-large" ng-model="bu.box.subcategoryid">     <option ng-repeat="subcat in subcats" value="{{subcat.id}}">{{subcat.name}}</option> </select> 

the object bu, subcats injected controller resolve , exists before bindings render , cats local storage:

$stateprovider.state('box',             {                 url: '/box-card/:id',                 templateurl: '/partials/main.module/contollers/box.html?v=' + global_app_version,                 controller: 'boxcontroller boxctrl',                 resolve: {                     box: function ($stateparams, httpservice) {                         return httpservice.getbox({ boxid: $stateparams.id });                     }                 }             }) 

controller variables initialization this:

function boxcontroller($scope, localstorageservice, httpservice, $state, appdata, uigridconstants, $modal, helpersservice, $stateparams, $sce, box) {         $scope.bu = box.data.bu;         $scope.cats = localstorageservice.get("cats");         $scope.subcats = box.data.currentsubcats; ............  var controllers = angular.module('app.controllers'); controllers.controller('boxcontroller', boxcontroller); 

the problem is, when select lists rendered, not initialized correctly, first option selected instead of relevant initialization ng-model. happen here? why not working correctly? checked variables in debug, fine... need here.

try solve problem ng-selected.