select dropdown not binding initially to AngularJS model

Question

Ok so my issue is that I have a simple select dropdown, and am using ng-repeat to populate the dropdown, like below:

<select ng-model="tstCtrl.model.value" required>
  <option ng-repeat="option in tstCtrl.myOptions" value="{{option.a}}">{{option.b}}</option>
</select>

After selecting an option, the binding to model.value works fine, but until then it doesn't seem to bind the selected dropdown option to the value model.value is initially set to.

This is demonstrated below:

<!DOCTYPE html>
<html>

  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular.min.js"></script>

  <script>
    angular.module('Test', []).controller('TestController', function(){
      
      this.model = {
        value:3
      };
      
      this.myOptions = [
        {a:1, b:"one"},
        {a:2, b:"two"},
        {a:3, b:"three"},
        {a:4, b:"four"},
        {a:5, b:"five"}];
    });
  </script>
  </head>

  <body ng-app="Test" ng-controller="TestController as tstCtrl">

    {{tstCtrl.model.value}}

    <select ng-model="tstCtrl.model.value" required>
      <option ng-repeat="option in tstCtrl.myOptions" value="{{option.a}}">{{option.b}}</option>
    </select>

  </body>



</html>

I think the above snippet makes it really clear, but am happy to answer any questions.

How do I solve this?

Thanks

Is there a reason you use ng-repeat instead of [ng-options](https://docs.angularjs.org/api/ng/directive/ngOptions)? — venerik, Sep 30 '15 at 17:03
Only because I prefer it syntactically, will it work with ng-options do you think? — JMK, Sep 30 '15 at 17:04
I do think so, the example in the documentation sets a default. If you want to stick to your approach: http://stackoverflow.com/questions/18194255/how-to-have-a-default-option-in-select-box-angular-js — venerik, Sep 30 '15 at 17:06

score 4 · Answer 1 · answered Sep 30 '15 at 17:16

I suggest you use the ng-options syntax instead of an ng-repeat inside your select. If you want to display property b but bind to property a you can use the following syntax:

<select ng-model="model.value" ng-options="option.a as option.b for option in myOptions" required>      
</select>

Here's your modified working snippet:

<!DOCTYPE html>
<html>

  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular.min.js"></script>

  <script>
    angular.module('Test', []).controller('TestController', function($scope){
      
      $scope.model = {
        value:3
      };
      
      $scope.myOptions = [
        {a:1, b:"one"},
        {a:2, b:"two"},
        {a:3, b:"three"},
        {a:4, b:"four"},
        {a:5, b:"five"}];
    });
  </script>
  </head>

  <body ng-app="Test" ng-controller="TestController">

    {{model.value}}

    <select ng-model="model.value" ng-options="option.a as option.b for option in myOptions"  required>      
    </select>

  </body>



</html>

score 2 · Accepted Answer · answered Sep 30 '15 at 17:20

2

If you absolutely must use ng-repeat, you could do it like this:

    <select ng-model="tstCtrl.model.value">
      <option ng-repeat="option in tstCtrl.myOptions" value="{{option.a}}" 
              ng-selected="tstCtrl.model.value==option.a">
                   {{option.b}}
       </option>
    </select>

but I agree with the others who advised to use ng-options instead.

answered Sep 30 '15 at 17:20

klasske

2,164
1
24
31

I went with this option, mainly because there may be non-Angular developers looking at this code from time to time, and this is much easier to read. I feel that ng-options will just confuse people – JMK Oct 01 '15 at 20:29

James Greene · Answer 3 · 2015-10-02T19:57:04.560

Theres a known issue with going from AngularJS 1.3.x to 1.4, specifically with ng-model and select dropdowns. In short, the Angular documentation was updated and they gave the more proper way to fix this issue:

app.directive('convertToNumber', function() {
    return {
        require: 'ngModel',
        link: function (scope, element, attrs, ngModel) {                
            ngModel.$parsers.push(function(val) {                    
                return parseInt(val, 10);
            });
            ngModel.$formatters.push(function (val) {                    
                return '' + val;
            });
        }
    };
});

And in your select dropdown, add the directive:

<select ng-model="tstCtrl.model.value" convert-to-number required>
  <option ng-repeat="option in tstCtrl.myOptions" value="{{option.a}}">{{option.b}}</option>
</select>

Here is the reference URL where the above solution originated from:

http://weblog.west-wind.com/posts/2015/May/21/Angular-Select-List-Value-not-binding-with-Static-Values

score 0 · Answer 4 · answered Sep 30 '15 at 17:21

0

Just need ng-options instead of ng-repeat like this:

ng-options="option.a as option.b for option in myOptions"

answered Sep 30 '15 at 17:21

Piotr Pierowicz

1

1

Could you please elaborate more your answer adding a little more description about the solution you provide? – abarisone Oct 01 '15 at 12:18

select dropdown not binding initially to AngularJS model

4 Answers4