Select option doesnt bind with ng-model

Question

I have an object with AllCountries and SelectedCoutry. I want to list all countries on a <select> and select the option with ng-model by the value of SelectedCountry.

But the default value of combobox gets selected null.

Example:

angular.module('ngPatternExample', [])
    .controller('ExampleController', ['$scope', function($scope) {
      $scope.OBJ = {
                    "OBJ": {
                      "AllCountries": [
                        {
                          "country": "USA",
                          "id": 1
                        },
                        {
                          "country": "Mexico",
                          "id": 2
                        },
                        {
                          "country": "Canada",
                          "id": 3
                        }
                      ],
                      "SelectedCountry": {
                        "country_id": 1,
                      }
                    }
                }
                
      $scope.AM = $scope.OBJ.OBJ;
    }]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="ngPatternExample">
<div ng-controller="ExampleController">
  selected country: {{AM.SelectedCountry.country_id}} <br/>
  <select class="form-control" ng-model="AM.SelectedCountry.country_id">
    <option value=""> --- </option>
    <option ng-repeat="co in AM.AllCountries" value="{{co.id}}"> {{co.country}} </option>
  </select>
</div>
  </body>

(http://plnkr.co/edit/PI3tOrIMSTMwGC0rYA5q?p=preview)

p.s A good explanation why this doesnt work allways in Angular would be great

Post the relevant code here at SO – Satpal Mar 18 '16 at 09:25 — Satpal, Mar 18 '16 at 09:25

score 3 · Accepted Answer · edited Mar 18 '16 at 09:40

3

Replace your select with this

<select class="form-control"  ng-options="co.id as co.country for co in OBJ.OBJ.AllCountries" ng-model="AM.SelectedCountry.country_id">
    <option value=""> --- </option>
</select>

edited Mar 18 '16 at 09:40

Erazihel

7,295
6
30
53

answered Mar 18 '16 at 09:23

Hassan Tariq

730
7
15

@user3334406 I've replaced your `select` in the Plunker with what Hassan Tariq suggested, it works fine. – Erazihel Mar 18 '16 at 09:26
Remove ng-repeat from options – Hassan Tariq Mar 18 '16 at 09:27
OK this works now :) thanks a lot, can someone explain why ng-repeat doesnt work – user3334406 Mar 18 '16 at 09:28

score 2 · Answer 2 · answered Mar 18 '16 at 09:24

Use ngOptions directive instead of repeating options in the select box by yourself.

<select 
  class="form-control"
  ng-model="AM.SelectedCountry.country_id"
  ng-options="co.id as co.country for co in AM.AllCountries">
    <option value=""> --- </option>
</select>

Updated plunk: http://plnkr.co/edit/FZcJVkJQlbLM3k544s8S?p=preview

Select option doesnt bind with ng-model

2 Answers2