Initial value of select not set in AngularJS

5
votes

In AngularJS 1.3 app I have a form on which I get model and possible values for select controls asynchronously from backend. When I get model value before values used in ng-options, no options becomes selected in select control. I managed to reproduce this behaviour:

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 timeout model has its old value 101 but no option is selected. Currently I find a workaround by using ng-if="model.values" on select, but I feel that there should be better way to do it.

Could somebody explain why option is not selected?

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

EDIT: I opened Plunkr in Firefox and I started to work, then I back to Chrome and it didn't work looks like crossbrowser issue...

2
angularjs
This appears to be specific to angular 1.3; The code works correctly in angular 1.2, and in the current version 1.4.6 – Claies
I'm unsure but I suspect this should be closed as unreproducible since the issue demonstrated only affects specific framework versions, and is not present in the current stable release. – Claies

2 Answers

1
votes

It looks like this is a regression in AngularJs 1.3.x.

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

0
votes

I agree with @PrimosK about issue.

The solution is to add tracking:

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

example in Plunker