angular doesn't update select elements with ng-model

Question

Angular doesn't update select elements with the contents of ng-model. The binding is single way only select->model. How can I make changes in the model propagated to the view ?

template:

<select class="gu2" name="coverDuration" ng-model="creditLimit.coverDuration" required="required">
   <option ng-value="90" selected="selected">90 days</option>
   <option ng-value="180">180 days</option>
</select>
just to check: {{creditLimit.coverDuration}}

controller:

app.controller('CreditLimitDetailsController', function ( $scope, creditLimit /* ... */ ) {
    // creditLimit.coverDuration can be 90 or 180.
    // I use a service to store the values between successive instanciations
    $scope.creditLimit = creditLimit;
}

In this exemple, the select stays with no option select, whereas the check shows 90.

Have a look at ngOptions. This might make things a lot easier for you. — Mouagip
– Mouagip, Commented Dec 18, 2013 at 11:06
I see a lot of answer with ngOptions, but this seems overkill and confusive for just two static options :/. Seriously, how can such a simple thing not be included in angular ? — BiAiB
– BiAiB, Commented Dec 18, 2013 at 11:26

DarkLeafyGreen · Accepted Answer · 2013-12-18 11:34:10Z

2

It works:

app.controller('MainCtrl', function($scope) {
  $scope.creditLimit = {}; //needs to be initialized
  $scope.creditLimit.coverDuration = 90;
});

and use

value=""

instead

ng-value=""

Plunker

edited Dec 18, 2013 at 11:34

answered Dec 18, 2013 at 11:04

DarkLeafyGreen

70.6k136 gold badges394 silver badges617 bronze badges

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

3 Comments

BiAiB Over a year ago

it does not work for me(chrome 31.0.1650.63), which browser are you using ?

DarkLeafyGreen Over a year ago

@BiAiB I am on 31.0.1650.63 too. I made a little edit. It works now. Use value instead ng-value.

BiAiB Over a year ago

that worked, while keeping ng-value. I need the value to be an integer because it will then be json serialized and the deseralizer won't allow strings.

Mouagip · Accepted Answer · 2013-12-18 11:47:34Z

0

If you don't want to use ngOptions then just use ngSelected instead of selected:

<option ng-value="90" ng-selected="true">90 days</option>

fiddle

edited Dec 18, 2013 at 11:47

answered Dec 18, 2013 at 11:38

Mouagip

5,3993 gold badges40 silver badges55 bronze badges

1 Comment

BiAiB Over a year ago

I edited the question. coverDuration is variable and can be 90 or 180 (in fact it's fed by this select among different instances of this controller). I think I could work around your example with ng-selected=" creditLimit.coverDuration==90 "

Pencilcheck · Accepted Answer · 2014-09-24 15:13:20Z

0

Probably need to blur the elemenet after selection, this is browser dependent

answered Sep 24, 2014 at 15:13

Pencilcheck

2,9984 gold badges29 silver badges16 bronze badges

Collectives™ on Stack Overflow

angular doesn't update select elements with ng-model

3 Answers 3

3 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related