Select initial value not set in AngularJS

Question

In an AngularJS 1.3 application, I have a form on which I get the model and the possible values ​​for the selected controls asynchronously from the backend. When I get the model value before the values ​​used in ng-options , no options are selected in the select control. I was able to reproduce this behavior:

 var app = angular.module('plunker', []); app.controller('MainCtrl', function($scope, $timeout) { $scope.model = { value: 101 }; $timeout(function() { $scope.model.values = [100, 101, 102, 103]; }, 1000); }); 

View:

 Options: <select ng-model="model.value" ng-options="v for v in model.values"> <option value="">Select some...</option> </select> 

After the timeout model has the old value of 101, but no option is selected. I am currently finding a workaround using ng-if="model.values" when choosing, but I believe there should be a better way to do this.

Can someone explain why the option is not selected?

Plunkr: http://plnkr.co/edit/4opZRJzdDfJhSNJx8RMF

EDIT: I opened Plunkr in Firefox, and I started working, and then returned to Chrome, and it didn't work, like a problem with crossbrowser ...

Answer 1

I agree with @PrimosK about the problem.

The solution is to add tracking:

  ng-options="v for v in model.values track by v" 

Plunker example

Answer 2

This seems to be a regression in AngularJs 1.3.x.

The example you provided works fine in AngularJs 1.2.x and 1.4.x.