Initial value of select not set in AngularJS

Question

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

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
– Claies, Commented Sep 23, 2015 at 17:46
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
– Claies, Commented Sep 23, 2015 at 17:49

PrimosK · Accepted Answer · 2015-09-23 17:57:38Z

1

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.

edited Sep 23, 2015 at 17:57

answered Sep 23, 2015 at 17:41

PrimosK

13.9k10 gold badges62 silver badges81 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

csharpfolk Over a year ago

Updating project to AngularJs 1.4 solves this problem (yesterday I made stupid mistake testing on Plunker, I check this again and it works)

Maxim Shoustin · Accepted Answer · 2015-09-23 17:55:58Z

0

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

edited Sep 23, 2015 at 17:55

answered Sep 23, 2015 at 17:45

Maxim Shoustin

78k29 gold badges212 silver badges229 bronze badges

Collectives™ on Stack Overflow

Initial value of select not set in AngularJS

2 Answers 2

1 Comment

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Related