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
– Satpal

2016-03-18 09:25:35 +00:00
Commented Mar 18, 2016 at 9:25 — Satpal
– Satpal, Commented Mar 18, 2016 at 9:25

Erazihel · Accepted Answer · 2016-03-18 09:40:51Z

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, 2016 at 9:40

Erazihel

7,6456 gold badges34 silver badges56 bronze badges

answered Mar 18, 2016 at 9:23

Hassan Tariq

7407 silver badges15 bronze badges

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

3 Comments

Erazihel Over a year ago

@user3334406 I've replaced your select in the Plunker with what Hassan Tariq suggested, it works fine.

Hassan Tariq Over a year ago

Remove ng-repeat from options

user3334406 Over a year ago

OK this works now :) thanks a lot, can someone explain why ng-repeat doesnt work

kvetis · Accepted Answer · 2016-03-18 09:24:18Z

2

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

answered Mar 18, 2016 at 9:24

kvetis

7,4202 gold badges33 silver badges54 bronze badges

Collectives™ on Stack Overflow

Select option doesnt bind with ng-model

2 Answers 2

3 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Linked

Related