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
– Raulucco, Commented Jan 25, 2016 at 15:59
for select i think you need ng-options docs.angularjs.org/api/ng/directive/ngOptions — Pablo Ortuño
– Pablo Ortuño, Commented Jan 25, 2016 at 16:04
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
– Venkat.R, Commented Jan 25, 2016 at 16:06

dfsq · Accepted Answer · 2016-01-25 16:04:34Z

7

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>

answered Jan 25, 2016 at 16:04

dfsq

193k26 gold badges244 silver badges261 bronze badges

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

2 Comments

Pablo Ortuño Over a year ago

I was about to write this! :P i think this is the correct answer!!

Sudarshan Kalebere Over a year ago

but what if i have to keep selected value based on ng-repeat value? check this stackoverflow.com/questions/50305993/…

Community · Accepted Answer · 2020-06-20 09:12:55Z

2

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)

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Jun 24, 2018 at 21:43

georgeawg

49k13 gold badges78 silver badges98 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

2 Comments

Don't use `ngSelected` with `ngModel`

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Don't use ngSelected with ngModel

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related

Don't use `ngSelected` with `ngModel`