javascript - fetch data to display in ng-options but set dynamic default value -

a user object available view populates form. 1 of elements display information drop-down. 2 requests made. 1 user information, , other list of timezones. both resolved through ui-router state so:

.state('app.userprofile', {         url: '/userprofile',         component: 'user',         resolve: {             user: ['userservice', function(userservice) {                 return userservice.fetchuser();             }],             timezones: ['timezoneservice', function(timezoneservice){                 return timezoneservice.fetchusatimezones();             }]         }     }) }]); 

i have given read of article found online after select element failed populate users timezone, select element still fails display information.

question

how populate default select option data user object populate options second response.

<label for="timezones">time zone</label>     <div>         <select name="timezones"             ng-init="usertimezone = $ctrl.user.business.timezone"             ng-change="usertimezone = usertimezone.abbr"             ng-model="usertimezone"              ng-options="item item.abbr item in $ctrl.timezones track item.abbr" class="form-control">             <option value="">{{usertimezone}}</option>         </select>         <p>{{usertimezone}}</p>     </div>   //second request timezones app.factory('timezoneservice', ['$http', '$q', function($http, $q){      var factory = {};      factory.fetchusatimezones = function() {          var deferred = $q.defer();          $http.get('../../p3sweb/assets/json/ustimezones.json')         .then(             function(response){                 console.log(response.data.ustimezones)                 deferred.resolve(response.data.ustimezones)             },             function(errresponse){                 deferred.resolve(errresponse)             }         );          return deferred.promise;     }      return factory;  }]) 

---

{   "ustimezones": [   {     "value": "hawaiian standard time",     "abbr": "hst",     "offset": -10,     "isdst": false,     "text": "(utc-10:00) hawaii",     "utc": [       "etc/gmt+10",       "pacific/honolulu",       "pacific/johnston",       "pacific/rarotonga",       "pacific/tahiti"     ]   },   {     "value": "alaskan standard time",     "abbr": "akdt",     "offset": -8,     "isdst": true,     "text": "(utc-09:00) alaska",     "utc": [       "america/anchorage",       "america/juneau",       "america/nome",       "america/sitka",       "america/yakutat"     ]   }   ] } 

update

it throwing error when had value of ng-model $ctrl.user.business.timezone have stored in variable usertimezone through ng-init directive. updated code

update 2

i have semi-working. updates fields though throws inconsitent 405 error. not going lie, i'm in 1 of 'how hell working' situations.

<select name="timezones"     ng-init="usertimezone._abbr = {abbr: $ctrl.user.business.timezone}"     ng-change="$ctrl.user.business.timezone = usertimezone._abbr"     ng-model="usertimezone._abbr"      ng-options="zone.abbr zone.text zone in $ctrl.timezones track zone.abbr" class="form-control"> <option value="">{{usertimezone._abbr}}</option> </select> <p>{{usertimezone._abbr}}</p> 

you have complex objects options. angular equality comparison when checking default value (which set via ng-model attribute), objects it's comparing object references (via generated $$hashkey property). because have 2 different object references, once timezone list, once user, hashkeys different. thus, they're treated "not equal", no default gets set.

if extend ng-options attribute use track by, can select unique, primitive property equality comparison makes more sense (such abbreviation). angular use property equality/uniqueness comparison instead of hashkey.

so you'd have like

<select name="timezones" ng-model="$ctrl.user.business.timezone" ng-options="item item.abbr item in $ctrl.timezones track item.abbr"></select>