AngularJS. When select have ng-model attribute, ng-selected not working

Question

I'm trying to set ng-selected in my option element, selected attribute is set to true, but option not selected, When I remove ng-model from select all become working.

The question: How to make option selected, when I'm using the model?

Here is my plunker (selected not working here)

My code:

var app = angular.module("plunker", []);

app.controller("TestController", ["$scope", function($scope) {
  $scope.test = 1;
  $scope.array = [
        {"id": 1, "name": "first"}, 
        {"id": 2, "name": "second"}, 
        {"id": 3, "name": "third"}
      ];
}]);

My template:

  <body ng-controller="TestController">
    Selected item must be {{ array[test-1].name }}
    <select ng-model="myModel">
      <option value="">Choose item..</option>
      <option ng-repeat="item in array" 
              ng-value="item.id" 
              ng-selected="item.id == test">
        {{ item.name }} ({{item.id == test}})
      </option>
    </select>
  </body>

Thanks a lot for any help!

ng-selected and ng-model exclude one another. Your model should match the option id — Raulucco
for select i think you need ng-options docs.angularjs.org/api/ng/directive/ngOptions — Pablo Ortuño
once ng-model removed from select. its picking the value to be selected. look at this forked one - plnkr.co/edit/u5bYQo7IgNmiABDZSyIQ?p=preview — Venkat.R

dfsq dfsq · Accepted Answer · 2016-01-25T16:04:34

Don't use ngSelected with ngRepeat. Go with ngOptions:

  <body ng-controller="TestController">
    Selected item must be {{ array[test-1].name }}
    <select ng-model="myModel" ng-options="item.id as item.name for item in array">
      <option value="">Choose item..</option>
    </select>
  </body>

AngularJS. When select have ng-model attribute, ng-selected not working

2 Answers

Don't use `ngSelected` with `ngModel`

AngularJS. When select have ng-model attribute, ng-selected not working

2 Answers

Don't use ngSelected with ngModel

Don't use `ngSelected` with `ngModel`