How does ng-selected work?

Question

Here is a snippet. Q2 is selected as I expect.

<select name="quarter" ng-model="Quarter" >
    <option value="1" >Q1</option>
    <option value="2" ng-selected="Quarter=='Q1'">Q2</option>
    <option value="3">Q3</option>
    <option value="4">4</option>
</select>

Changing 'Q1' to 'Q2' makes nothing as selected as I expect. Now putting ng-selected="Quarter=='Q1'" DOES NOT make Q1 selected until i delete ng-selected="Quarter=='Q2"

wtf. How is this suppose to work?

this seems to be working for me or is this not what you are trying to do? http://jsfiddle.net/xpjaD/ — Ronnie, Apr 02 '13 at 18:45
@Ronnie: That IS what I am trying to do. WTH. I deleted all my controller code except that assignment to Q1 and... i guess something is very wrong in the html — BruteCode, Apr 02 '13 at 18:48
@Ronnie: Related: http://stackoverflow.com/questions/15772672/why-does-ng-selected-not-work-with-ng-repeater — BruteCode, Apr 02 '13 at 19:28
Simplest way use ng-init
[Follow this example](http://stackoverflow.com/a/41925114/4805527) — T-Bee, Jan 29 '17 at 19:49

Bastien Caudan · Accepted Answer · 2014-04-18T06:42:50.043

21

If you put the ng-selected on the option element, your option will be selected when the ng-selected value is true. In your case, the option Q2 is selected when Quarter is equal to Q1.

If you want to select the value passed in Quarter, you must put the ng-selected on the select element :

<select name="quarter" ng-model="Quarter" ng-selected="Quarter"
        ng-options="Quarter for Quarter in Quarters" >
    {{Quarter}}
</select>

Take a look at the select directive documentation.

edited Apr 18 '14 at 06:42

answered Apr 02 '13 at 18:53

Bastien Caudan

4,482
1
17
29

Interesting but also wtf. I don't see ng-options on the api website docs.angularjs.org/api/ Also it doesnt seem to work with ng-repeater http://stackoverflow.com/questions/15772672/why-does-ng-selected-not-work-with-ng-repeater – BruteCode Apr 02 '13 at 19:31
ng-options is an attribute of the select directive : [doc.angularjs](http://docs.angularjs.org/api/ng.directive:select) – Bastien Caudan Apr 02 '13 at 22:54
Your fiddle has been flagged as unsafe due to it having an embedded iframe as the only content...!!! sketchy! – DrCord Apr 15 '14 at 23:13
Really weird... I give a link to the official doc instead. Thanks! – Bastien Caudan Apr 18 '14 at 06:45
it seems that it just solve the problem of choosing a default option but when default is selected the model does not updated properly.please give a solution for updating the model too – ali Oct 27 '14 at 10:30
This just didn't work for me when populating options with an ng-repeat. This answer did, though: https://stackoverflow.com/a/31676786/498949 – Chris Rae Jan 22 '19 at 20:39

score 5 · Answer 2 · answered Jul 28 '15 at 12:47

5

<select ng-model="hour">
    <option ng-selected="hour == $index" ng-repeat="h in (((b=[]).length=24)&&b) track by $index" ng-bind="$index">{{h}}</option>
</select>

if you want a select for 24 hour, you can do this.

answered Jul 28 '15 at 12:47

user1927627

254
4
6

score 5 · Answer 3 · answered Mar 04 '16 at 02:39

like this:

<body ng-controller="MainCtrl">
  {{referenceNumber}}
    <select ng-model="referenceNumber">
            <option ng-selected="!referenceNumber">Default</option>
            <option ng-repeat="number in numbers track by $index" ng-value="number">{{number}}</option>
        </select>
  </body>

"I believe one of the main reasons for ngSelected is to set default values depending upon if the model is not set correctly." joshkurz commented on Mar 3, 2014

So the right way would be to rely on ng-model only in you case. The right way to do what you are trying to do(pre select a option) is like this:

<select ng-model="purchase.product" name="purchase.product" class="u-full-width" ng-options="product.id as product.name for product in products"></select>

Reference:

score 2 · Answer 4 · edited Nov 09 '18 at 09:43

The ng-selected directive takes a boolean value or an expression which leads to a true/false boolean result.

You just need to pass its value true to make it work or an expression which leads to true.

It has nothing to do with ng-model of <select> tag.

Following is an example of this behaviour:

<select name="quarter" ng-model="Quarter" >
    <option value="1" >Q1</option>
    <option value="2" ng-selected="true">Q2</option>
    <option value="3">Q3</option>
    <option value="4">Q4</option>
</select>

This will make option Q2 selected by default.

How does ng-selected work?

4 Answers4

Linked