CODEWITHSUNDEEP
javascriptangularjs
BiAiB
BiAiB

Reputation: 14122

angular doesn't update select elements with ng-model

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.

Upvotes: 0

Views: 2912

Answers (3)

Pencilcheck
Pencilcheck

Reputation: 2922

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

Upvotes: 0

Mouagip
Mouagip

Reputation: 5319

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

Upvotes: 0

DarkLeafyGreen
DarkLeafyGreen

Reputation: 70416

It works:

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

and use

value=""

instead 

ng-value=""

Plunker

Upvotes: 2

Related Questions