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

Asked 25/1, 2016 at 15:52 Answered 24/6, 2018 at 21:43

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!

Petiolule answered 25/1, 2016 at 15:52 Comment(3)

ng-selected and ng-model exclude one another. Your model should match the option id – Bondie 25/1, 2016 at 15:59

for select i think you need ng-options docs.angularjs.org/api/ng/directive/ngOptions – Nottingham 25/1, 2016 at 16:4

once ng-model removed from select. its picking the value to be selected. look at this forked one - plnkr.co/edit/u5bYQo7IgNmiABDZSyIQ?p=preview – Cloakroom 25/1, 2016 at 16:6

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>

Ricker answered 25/1, 2016 at 16:4 Comment(2)

I was about to write this! :P i think this is the correct answer!! – Nottingham 25/1, 2016 at 16:5

but what if i have to keep selected value based on ng-repeat value? check this #50306493 – Dogcart 12/5, 2018 at 14:46

Don't use `ngSelected` with `ngModel`

From the Docs:

Note: ngSelected does not interact with the <select> and ngModel directives, it only sets the selected attribute on the element. If you are using ngModel on the select, you should not use ngSelected on the options, as ngModel will set the select value and selected options.

— AngularJS ng-selected API Reference

See additional Docs:

See Stackoverflow:

Using ng-repeat to generate select options (with Demo)

Mo answered 24/6, 2018 at 21:43 Comment(0)

Don't use `ngSelected` with `ngModel`

Recommended topics

Hot tags

Don't use ngSelected with ngModel

Recommended topics

Hot tags

Don't use `ngSelected` with `ngModel`