Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Initial value of select not set in AngularJS

Tags:

angularjs

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...

like image 896
csharpfolk Avatar asked Nov 10 '22 04:11

csharpfolk


1 Answers

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.

like image 167
PrimosK Avatar answered Nov 15 '22 05:11

PrimosK