How do I set the value property in AngularJS' ng-options?

Question

Here is what seems to be bothering a lot of people (including me).

When using the ng-options directive in AngularJS to fill in the options for a <select> tag, I cannot figure out how to set the value for an option. The documentation for this is really unclear - at least for a simpleton like me.

I can set the text for an option easily like so:

ng-options="select p.text for p in resultOptions"

When resultOptions is for example:

[
    {
        "value": 1,
        "text": "1st"
    },
    {
        "value": 2,
        "text": "2nd"
    }
]

It should be (and probably is) the most simple thing to set the option values, but so far I just don't get it.

Had the same problem because I didn't find the docs (as shown below) very clear. — benvds, Nov 13 '12 at 16:32
The use of "select" as it is depicted in the question is essentially wrong, because "select" in this context, is not a keyword, but it is a place holder for an expression. This is from AngularJS' documentation: "select: The result of this expression will be bound to the model of the parent element. If not specified, select expression will default to value." I have provide more detail in my answer below. — Majix, May 05 '14 at 15:18
For me this is the best answer. http://stackoverflow.com/questions/12139152/how-to-set-value-property-in-angularjs-ng-options#22997081 — Sanjay, Mar 12 '15 at 09:10
Note: For ng-options to work, ng-model is mandatory!!!!!!!!! Ref:http://stackoverflow.com/a/13049740/234110 — Anand Rockzz, Apr 05 '15 at 14:17
http://stackoverflow.com/questions/18615624/angularjs-ng-options-with-group/37035297#37035297 — Shafqat, May 04 '16 at 18:31
When using ng-options first make sure the array is setup correctly. Secondly the text value is set first, at the end the value/Id is set by track by x.x x.ChannelName for x in DistChannelList[0] track by x.DistributionChannelID — Deathstalker, Feb 05 '20 at 19:14

score 712 · Accepted Answer · edited Mar 19 '18 at 14:23

712

See ngOptions

ngOptions(optional) – {comprehension_expression=} – in one of the following forms:

For array data sources: label for value in array select as label for value in array label group by group for value in array select as label group by group for value in array track by trackexpr For object data sources: label for (key , value) in object select as label for (key , value) in object label group by group for (key, value) in object select as label group by group for (key, value) in object

In your case, it should be

array = [{ "value": 1, "text": "1st" }, { "value": 2, "text": "2nd" }];

<select ng-options="obj.value as obj.text for obj in array"></select>

Update

With the updates on AngularJS, it is now possible to set the actual value for the value attribute of select element with track by expression.

<select ng-options="obj.text for obj in array track by obj.value">
</select>

How to remember this ugly stuff

To all the people who are having hard time to remember this syntax form: I agree this isn't the most easiest or beautiful syntax. This syntax is kind of an extended version of Python's list comprehensions and knowing that helps me to remember the syntax very easily. It's something like this:

Python code:

my_list = [x**2 for x in [1, 2, 3, 4, 5]]
> [1, 4, 9, 16, 25]

# Let people to be a list of person instances
my_list2 = [person.name for person in people]
> my_list2 = ['Alice', 'Bob']

This is actually the same syntax as the first one listed above. However, in <select> we usually need to differentiate between the actual value in code and the text shown (the label) in a <select> element.

Like, we need person.id in the code, but we don't want to show the id to the user; we want to show its name. Likewise, we're not interested in the person.name in the code. There comes the as keyword to label stuff. So it becomes like this:

person.id as person.name for person in people

Or, instead of person.id we could need the person instance/reference itself. See below:

person as person.name for person in people

For JavaScript objects, the same method applies as well. Just remember that the items in the object is deconstructed with (key, value) pairs.

edited Mar 19 '18 at 14:23

Dan Atkinson

11,391
14
81
114

answered Aug 27 '12 at 10:33

Umur Kontacı

35,403
8
73
96

33

Your example doesn't fill value attribute of option. It defines what would be stored in the model of – Artem Andreev Aug 27 '12 at 10:53
It does fill the attribute of option with the `obj.value`. Just like in your example. – Umur Kontacı Aug 27 '12 at 10:57
57

Strange but I get , in Chrome and FF. – Artem Andreev Aug 27 '12 at 11:04
1

Ok, I get it now. I was expecting to see select tag with where the options values come from obj.value (which they don't) but for me its enough that the model has the selected object. Many thanks for the help. – Jukka Puranen Aug 27 '12 at 11:11
1

Sorry, my bad, I was looking at the bound model, it does not set the value. But you don't need it if you don't need to access it outside of angular. – Umur Kontacı Aug 27 '12 at 11:13
I think there's a slight bug here. If you put any other number in for values, it will never actually generate those values into html values. For example, if you write "anything in a string" as a value, it'll still produce incrementing numbers for your values. – Trip Jan 30 '13 at 22:11
49

It's not bug, it's a feature. angularjs handles ngOptions and ngModel internally, this way it allows you to use any type of object as value in option rather than only strings. You should never try to get the value of the select *the other way around* you just need to use ngModel you attached to select element. – Umur Kontacı Jan 31 '13 at 06:48
1

The `select` needs an `ng-model` attribute for it to do anything. This is a weird issue I encountered today in Angular that I intend to report as a bug; select will not show options from `ng-options` without also having an `ng-model` attribute. – Ezekiel Victor Jul 24 '13 at 07:51
Well, without `ng-model`, `select` and `ng-options` are pretty useless. Also, it would make ambigious which option is selected, since there is no `ng-model`. – Umur Kontacı Jul 24 '13 at 10:15
4

I beg to differ. Internally the select directive could easily use its own invisible model to track which option is selected. Even if it didn't track the model value internally, it could at least render the options and just prepend and select the empty option (which is the behavior that it does now if you set the model to a value not in the option set). The only dependency for showing options is the options themselves -- POLA principle applies here. – Ezekiel Victor Aug 18 '13 at 11:04
Also, it is not necessarily useless. I can posit plenty of use cases such that `select` is used with a custom directive that supplants the need for `ngModel`. The transparent requirement of `ngModel` is counter intuitive. (On that note, at the very least an informative exception is in order.) – Ezekiel Victor Aug 18 '13 at 11:06
I believe it would be easier and conside to develop a select directive that just syncs over `ngModel` anything else kinda violates DRY. For creating a directive supplants `ngModel`, I would go along with creating a directive that works together with `ngModel`. However, I definitely agree on silent failing issue, though. – Umur Kontacı Aug 18 '13 at 11:46
– Anja Ishmukhametova Dec 03 '13 at 15:58
3

Why does this answer have so many up votes when it does not provide the answer? frm.adiputra's answer is correct. – Noishe Dec 25 '13 at 09:59
@Noishe - his answer uses key-value pairs, not object property names. – Ben May 15 '14 at 19:23
@edthethird Strange because 1.2.15 docs still offer the same documentation: https://code.angularjs.org/1.2.15/docs/api/ng/directive/select – Umur Kontacı Jun 04 '14 at 09:32
Not working for me as of v1.2.21. The value is ignored. The object syntax works, but then of course the option order is undefined. – numbers1311407 Aug 04 '14 at 12:21
1

The answer from @BrunoGomes using `track by` works for v1.2.21. – numbers1311407 Aug 04 '14 at 12:27
Every time when I want do some manipulations with ng-options I appear on stackoverflow. Because syntax and documentation so UGLY for solid framework like this. – alexche8 Nov 20 '14 at 15:16
If anyone on the AngularJS team discovers this, please update the documentation. It is horribly confusing and I wasted quite a long time before discovering this answer. – Yaron Feb 11 '15 at 02:16
Excellent answer - thank you. The update with the track by syntax was particularly useful. Far better than the angular documentation - it made their documentation useful. – bmacnaughton Apr 29 '15 at 15:48
This works for me to display, but I'm having trouble when setting the value of the model in my controller. Should i be setting it as the ID or the value? Neither seems to work. – zekone Jun 10 '16 at 12:55
Thanks for pointing out the similarity of this syntax with Python! Excellent explanation. – themefield Nov 11 '21 at 00:23

score 138 · Answer 2 · edited Jan 07 '17 at 13:08

138

How the value attributes gets its value:

When using an array as datasource, it will be the index of the array element in each iteration;
When using an object as datasource, it will be the property name in each iteration.

So in your case it should be:

obj = { '1': '1st', '2': '2nd' };

<select ng-options="k as v for (k,v) in obj"></select>

edited Jan 07 '17 at 13:08

Peter Mortensen

30,738
21
105
131

answered Sep 12 '12 at 08:44

frm.adiputra

1,497
1
8
3

16

+1 for explaining how Angular sets the value attribute of the option elements. – Mark Rajcok Dec 11 '12 at 16:49
2

This does not set a value. Values default to numbers. But you can't actually specify a "value".. rediculous.. – Trip Jan 30 '13 at 22:21
13

@Trip, if you 'inspect' the select options, you will see numbers, but if you look at the bound value in the model, the value is in this case the 'k' value. It's confusing. blesh has a plunk that shows this in this answer: http://stackoverflow.com/questions/13047923/working-with-ng-options-in-angular http://plnkr.co/edit/vJOljg?p=preview – TsenYing Feb 20 '13 at 18:43
Take note that the model of the select tag should be a different model from the source of the options. – raberana Nov 23 '13 at 12:40
4

This is should be included into the angular document, short and precise. +1 – devric Apr 28 '14 at 10:02
2

This is the only solution that worked for me. What a nasty headache. – Jon Jun 12 '14 at 01:35
Thank you, dude. You saved my life today. This worked. Default one is: dreadful ugly syntax from Angular. – webblover Jun 18 '14 at 10:16
This does not really work, because the order of the keys is undefined – jameshfisher Jun 25 '14 at 16:50
@jameshfisher You can add `| orderBy: 'toString()'` to sort by the name. – nilskp Sep 07 '14 at 22:22
@frm.adiputra Your example doesn't seem to work, here's a fiddle: http://jsfiddle.net/zFtkR/107/ – adamj Dec 27 '15 at 16:32

score 123 · Answer 3 · edited Jun 20 '20 at 09:12

123

I had this issue too. I wasn't able to set my value in ng-options. Every option that was generated was set with 0, 1, ..., n.

To make it right, I did something like this in my ng-options:

HTML:

<select ng-options="room.name for room in Rooms track by room.price">
    <option value="">--Rooms--</option>
</select>

I use "track by" to set all my values with room.price.

(This example sucks: because if there were more than one price equal, the code would fail. So BE SURE to have different values.)

JSON:

$scope.Rooms = [
            { name: 'SALA01', price: 100 },
            { name: 'SALA02', price: 200 },
            { name: 'SALA03', price: 300 }
        ];

I learned it from blog post How to set the initial selected value of a select element using Angular.JS ng-options & track by.

Watch the video. It's a nice class :)

edited Jun 20 '20 at 09:12

Community

1
1

answered Apr 10 '14 at 19:17

Bruno Gomes

1,435
1
11
14

8

This works perfectly. On top of it, it allows to use a datalist element with a contained – climboid May 07 '14 at 15:57
9

This is the **most appropriate answer for** the ng-options with option box's value to match the array/object. I would have given **10000 points** for you for saving everyone's day if there is a rewards exchange system. Most bizarre syntax from angular team. – webblover Jul 11 '14 at 06:36
2

THANK YOU! This was so frustrating for a long time! – Sean Thompson Jul 30 '14 at 22:39
2

I hope the room prices are never the same, because then this breaks. – nilskp Sep 07 '14 at 22:24
Is it possible to make an ajax call for ng-options as soon as select is clicked? – streetlight Nov 24 '14 at 20:15
I think so... but you will click, call the request... and the select in this moment wont be filled, you should click again in the select... but will call the request again @_@ and again and again – Bruno Gomes Nov 25 '14 at 12:44
1

the track by is the key! – sidonaldson Mar 11 '15 at 12:44
2

This should be by far the best answer and selected for the answer, since this is the only solution that worked for me. Actually, in AngularJS, you need not worry about what comes in value, ie 0,1,2 (which comes by default), because you can get the whole lot of object as value. Please refer to this answer http://stackoverflow.com/questions/12139152/how-to-set-value-property-in-angularjs-ng-options#29005692 – Sanjay Mar 12 '15 at 09:14
2

This is a better answer to this particular question but everyone keeps up voting the copy/paste documentation – Erik Grosskurth May 17 '16 at 14:01
1

Awesome summary, Bruno :) – Meligy May 21 '16 at 06:24
@BrunoGomes I need help Please view ones this [Question](http://stackoverflow.com/q/41223958/2143446) – Neotrixs Dec 20 '16 at 07:33

score 47 · Answer 4 · edited Jan 07 '17 at 13:13

47

If you want to change the value of your option elements because the form will eventually be submitted to the server, instead of doing this,

<select name="text" ng-model="text" ng-options="select p.text for p in resultOptions"></select>

You can do this:

<select ng-model="text" ng-options="select p.text for p in resultOptions"></select>
<input type="hidden" name="text" value="{{ text }}" />

The expected value will then be sent through the form under the correct name.

edited Jan 07 '17 at 13:13

Peter Mortensen

30,738
21
105
131

answered Jun 12 '13 at 16:35

neemzy

1,899
23
25

2

I would add that, rather than use ``, I'd use `ng-value`. So: ``. – Dan Atkinson Apr 03 '14 at 14:41
to clarify in my case, i am not submitting the form through Angular using a json post--rather i am submitting the form normally using http post, so overriding the values that Angular puts in the tag allows me to submit the correct value (thanks!). I did not need to use ng-value in the hidden input, rather i needed to set the value tag as the original post notes. – FireDragon May 27 '14 at 17:46

score 26 · Answer 5 · edited May 23 '17 at 12:34

To send a custom value called my_hero to the server using a normal form submit:

JSON:

"heroes": [
  {"id":"iron", "label":"Iron Man Rocks!"},
  {"id":"super", "label":"Superman Rocks!"}
]

HTML:

<select ng-model="hero" ng-options="obj.id as obj.label for obj in heroes"></select>
<input type="hidden" name="my_hero" value="{{hero}}" />

The server will receive either iron or super as the value of my_hero.

This is similar to the answer by @neemzy, but specifying separate data for the value attribute.

score 24 · Answer 6 · edited Jan 07 '17 at 13:20

It appears that ng-options is complicated (possibly frustrating) to use, but in reality we have an architecture problem.

AngularJS serves as an MVC framework for a dynamic HTML+JavaScript application. While its (V)iew component does offer HTML "templating," its primary purpose is to connect user actions, via a controller, to changes in the model. Therefore the appropriate level of abstraction, from which to work in AngularJS, is that a select element sets a value in the model to a value from a query.

How a query row is presented to the user is the (V)iew’s concern and ng-options provides the for keyword to dictate what the contents of the option element should be i.e. p.text for p in resultOptions.
How a selected row is presented to the server is the (M)odel’s concern. Therefore ng-options provides the as keyword to specify what value is provided to the model as in k as v for (k,v) in objects.

The correct solution this is problem is then architectural in nature and involves refactoring your HTML so that the (M)odel performs server communication when required (instead of the user submitting a form).

If an MVC HTML page is unnecessary over-engineering for the problem at hand: then use only the HTML generation portion of AngularJS’s (V)iew component. In this case, follow the same pattern that is used for generating elements such as <li />'s under <ul />'s and place a ng-repeat on an option element:

<select name=“value”>
    <option ng-repeat=“value in Model.Values” value=“{{value.value}}”>
        {{value.text}}
    </option>
</select>

As kludge, one can always move the name attribute of the select element to a hidden input element:

<select ng-model=“selectedValue” ng-options=“value.text for value in Model.Values”>
</select>
<input type=“hidden” name=“value” value=“{{selectedValue}}” />

bad performance when using ng-repeat on an option element, possibly? you are supposed to use ng-options on the select itself. — DrCord, Apr 20 '14 at 16:49
@DrCord: Using ng-repeat on the option element is offered as a solution only in isolated cases (when a proper MVC HTML pages is unnecessary over-engineering). Maybe the downvoter didn't ready it very closely. It will be edited to call out more specifically that ng-repeat on option element is not the ideal case. — Joshcodes, Apr 20 '14 at 17:29
As an Angular N00b I would have selected this solution because in the first instance it looks like a fair suggestion and likely to work. The syntax suggested in other answers is, to say the least, bizarre - even if one of the many choices happens to work. It is a legitimate solution and if it avoids premature optimisation then it's fine. Down voting is just mean it seems. — Ian Lewis, Sep 04 '14 at 16:27
This is what it says on the AngularJS website: https://docs.angularjs.org/api/ng/directive/select. ```"Note: ngOptions provides an iterator facility for the — Ian Lewis, Sep 05 '14 at 10:09
@IanLewis, thanks, that makes sense. It did not make any sense to me why ngRepeat would be any less performant on an unbound select's options than it is on an

score 20 · Answer 7 · edited May 23 '17 at 12:26

20

You can do this:

<select ng-model="model">
    <option value="">Select</option>
    <option ng-repeat="obj in array" value="{{obj.id}}">{{obj.name}}</option>
</select>

-- UPDATE

After some updates, user frm.adiputra's solution is much better. Code:

obj = { '1': '1st', '2': '2nd' };
<select ng-options="k as v for (k,v) in obj"></select>

edited May 23 '17 at 12:26

Community

1
1

answered Nov 01 '12 at 19:00

Liko

2,130
19
20

8

It is better to use ng-options inside of the select element/directive. E.g., – Mark Rajcok Dec 11 '12 at 16:47
I just had a strange bug show up because of doing it this way. Lots of pained searching brought me to the discovery of ng-options, and the bug disappeared. The ng-model seems to require that the value attribute of the options is numerical and ascending from 0. If you change the value to a non numerical index by using ng-repeat and – Noishe Dec 25 '13 at 10:07

Jeffrey A. Gochin · Answer 8 · 2016-12-31T04:34:23.397

I have struggled with this problem for a while today. I read through the AngularJS documentation, this and other posts and a few of blogs they lead to. They all helped me grock the finer details, but in the end this just seems to be a confusing topic. Mainly because of the many syntactical nuances of ng-options.

In the end, for me, it came down to less is more.

Given a scope configured as follows:

        //Data used to populate the dropdown list
        $scope.list = [
           {"FirmnessID":1,"Description":"Soft","Value":1},         
           {"FirmnessID":2,"Description":"Medium-Soft","Value":2},
           {"FirmnessID":3,"Description":"Medium","Value":3}, 
           {"FirmnessID":4,"Description":"Firm","Value":4},     
           {"FirmnessID":5,"Description":"Very Firm","Value":5}];

        //A record or row of data that is to be save to our data store.
        //FirmnessID is a foreign key to the list specified above.
        $scope.rec = {
           "id": 1,
           "FirmnessID": 2
        };

This is all I needed to get the desired result:

        <select ng-model="rec.FirmnessID"
                ng-options="g.FirmnessID as g.Description for g in list">
            <option></option>
        </select>

Notice I did not use track by. Using track by the selected item would alway return the object that matched the FirmnessID, rather than the FirmnessID itself. This now meets my criteria, which is that it should return a numeric value rather than the object, and to use ng-options to gain the performance improvement it provides by not creating a new scope for each option generated.

Also, I needed the blank first row, so I simply added an <option> to the <select> element.

Here is a Plunkr that shows my work.

Great, but what's the purpose of the "Value" keys? They don't seem to be necessary. — mhenry1384, Jul 07 '15 at 23:57
Not relevant to the example. They are simply part of the original data provided to me by my client. — Jeffrey A. Gochin, Jul 08 '15 at 00:09

KthProg · Answer 9 · 2014-10-13T19:26:18.667

Instead of using the new 'track by' feature you can simply do this with an array if you want the values to be the same as the text:

<select ng-options="v as v for (k,v) in Array/Obj"></select>

Note the difference between the standard syntax, which will make the values the keys of the Object/Array, and therefore 0,1,2 etc. for an array:

<select ng-options"k as v for (k,v) in Array/Obj"></select>

k as v becomes v as v.

I discovered this just based on common sense looking at the syntax. (k,v) is the actual statement that splits the array/object into key value pairs.

In the 'k as v' statement, k will be the value, and v will be the text option displayed to the user. I think 'track by' is messy and overkill.

Waaaaat? Works for arrays all over the place on my pages, are we using the same version of AngularJS? — KthProg, Oct 17 '14 at 12:43

score 11 · Answer 10 · edited Jan 07 '17 at 13:47

11

This was best suited for all scenarios according to me:

<select ng-model="mySelection.value">
   <option ng-repeat="r in myList" value="{{r.Id}}" ng-selected="mySelection.value == r.Id">{{r.Name}}
   </option>
</select>

where you can use your model to bind the data. You will get the value as the object will contain and the default selection based on your scenario.

edited Jan 07 '17 at 13:47

Peter Mortensen

30,738
21
105
131

answered Jun 04 '15 at 13:22

blue

932
7
9

1

Love this solution. Their angular helpers for this directive are unnecessarily complex. Thanks for being the self proclaimed judge of usage. – David Melin Mar 17 '17 at 00:10

score 9 · Answer 11 · edited Jan 07 '17 at 13:38

This is how I resolved this. I tracked the select by value and set the selected item property to the model in my JavaScript code.

Countries =
[
    {
        CountryId = 1, Code = 'USA', CountryName = 'United States of America'
    },
    {
       CountryId = 2, Code = 'CAN', CountryName = 'Canada'
    }
]

<select ng-model="vm.Enterprise.AdminCountry" ng-options="country.CountryName for country in vm.Countries track by country.CountryId">

vm is my controller and the Country in the controller retrieved from the service is {CountryId =1, Code = 'USA', CountryName='United States of America'}.

When I selected another country from the select dropdown and posted my page with "Save", I got the correct country bound.

score 8 · Answer 12 · edited May 23 '17 at 11:55

8

The ng-options directive does not set the value attribute on the <options> elements for arrays:

Using limit.value as limit.text for limit in limits means:

set the <option>'s label as limit.text
save the limit.value value into the select's ng-model

See Stack Overflow question AngularJS ng-options not rendering values.

edited May 23 '17 at 11:55

Community

1
1

answered Jul 01 '13 at 07:42

timestopper

440
3
4

Wessam Al-Bakary · Answer 13 · 2017-12-20T07:49:58.367

6

You can use ng-options to achieve select tag binding to value and display members

While using this data source

countries : [
              {
                 "key": 1,
                 "name": "UAE"
             },
              {
                  "key": 2,
                  "name": "India"
              },
              {
                  "key": 3,
                  "name": "OMAN"
              }
         ]

you can use the below to bind your select tag to value and name

<select name="text" ng-model="name" ng-options="c.key as c.name for c in countries"></select>

it works great

edited Dec 20 '17 at 07:49

answered Dec 19 '17 at 16:20

Wessam Al-Bakary

91
2
5

1

Please augment your code-only answer with some explanation, in order to avoid the misconception that StackOverflow is a free code writing service. – Yunnosch Dec 19 '17 at 19:17

score 5 · Answer 14 · answered Dec 03 '13 at 15:59

5

<select ng-model="color" ng-options="(c.name+' '+c.shade) for c in colors"></select><br>

answered Dec 03 '13 at 15:59

Anja Ishmukhametova

1,535
16
14

Aleks · Answer 15 · 2017-01-09T10:13:56.923

A year after the question, I had to find an answer for this question as non of these gave the actual answer, at least to me.

You have asked how to select the option, but nobody has said that these two things are NOT the same:

If we have an options like this:

$scope.options = [
    { label: 'one', value: 1 },
    { label: 'two', value: 2 }
  ];

And we try to set a default option like this:

$scope.incorrectlySelected = { label: 'two', value: 2 };

It will NOT work, but if you try to select the option like this:

$scope.correctlySelected = $scope.options[1];

It will WORK.

Even though these two objects have the same properties, AngularJS is considering them as DIFFERENT because AngularJS compares by the reference.

Take a look at the fiddle http://jsfiddle.net/qWzTb/.

score 3 · Answer 16 · edited May 23 '17 at 12:03

The correct answer to this question has been provided by user frm.adiputra, as currently this seems to be the only way to explicitly control the value attribute of the option elements.

However, I just wanted to emphasize that "select" is not a keyword in this context, but it is just a placeholder for an expression. Please refer to the following list, for the definition of the "select" expression as well as other expressions that can be used in ng-options directive.

The use of select as it is depicted in the question:

ng-options='select p.text for p  in resultOptions'

is essentially wrong.

Based on the list of expressions, it seems that trackexpr may be used to specify the value, when options are given in an array of objects, but it has been used with grouping only.

From AngularJS' documentation for ng-options:

array / object: an expression which evaluates to an array / object to iterate over.
value: local variable which will refer to each item in the array or each property value of object during iteration.
key: local variable which will refer to a property name in object during iteration.
label: The result of this expression will be the label for element. The expression will most likely refer to the value variable (e.g. value.propertyName).
select: The result of this expression will be bound to the model of the parent element. If not specified, select expression will default to value.
group: The result of this expression will be used to group options using the DOM element.
trackexpr: Used when working with an array of objects. The result of this expression will be used to identify the objects in the array. The trackexpr will most likely refer to the value variable (e.g. value.propertyName).

score 3 · Answer 17 · edited Jan 07 '17 at 13:28

Selecting an item in ng-options can be a bit tricky depending on how you set the data source.

After struggling with them for a while I ended up making a sample with most common data sources I use. You can find it here:

http://plnkr.co/edit/fGq2PM?p=preview

Now to make ng-options work, here are some things to consider:

Normally you get the options from one source and the selected value from other. For example:
- states :: data for ng-options
- user.state :: Option to set as selected
Based on 1, the easiest/logical thing to do is to fill the select with one source and then set the selected value trough code. Rarely would it be better to get a mixed dataset.
AngularJS allows select controls to hold more than key | label. Many online examples put objects as 'key', and if you need information from the object set it that way, otherwise use the specific property you need as key. (ID, CODE, etc.. As in the plckr sample)
The way to set the value of the dropdown/select control depends on #3,
- If the dropdown key is a single property (like in all examples in the plunkr), you just set it, e.g.: $scope.dropdownmodel = $scope.user.state;
- If you set the object as key, you need to loop trough the options, even assigning the object will not set the item as selected as they will have different hashkeys, e.g.:
```
for (var i = 0, len = $scope.options.length; i < len; i++) {
  if ($scope.options[i].id == savedValue) { // Your own property here:
    console.log('Found target! ');
    $scope.value = $scope.options[i];
    break;
  }
}
```

You can replace savedValue for the same property in the other object, $scope.myObject.myProperty.

over a years later, I thank you for the plunker sample. Very useful. — bob.mazzo, Sep 24 '15 at 16:40

score 3 · Answer 18 · edited May 23 '17 at 12:26

For me the answer by Bruno Gomes is the best answer.

But actually, you need not worry about setting the value property of select options. AngularJS will take care of that. Let me explain in detail.

Please consider this fiddle

angular.module('mySettings', []).controller('appSettingsCtrl', function ($scope) {

    $scope.timeFormatTemplates = [{
        label: "Seconds",
        value: 'ss'
    }, {
        label: "Minutes",
        value: 'mm'
    }, {
        label: "Hours",
        value: 'hh'
    }];


    $scope.inactivity_settings = {
        status: false,
        inactive_time: 60 * 5 * 3, // 15 min (default value), that is, 900 seconds
        //time_format: 'ss', // Second (default value)
        time_format: $scope.timeFormatTemplates[0], // Default seconds object
    };

    $scope.activity_settings = {
        status: false,
        active_time: 60 * 5 * 3, // 15 min (default value), that is,  900 seconds
        //time_format: 'ss', // Second (default value)
        time_format: $scope.timeFormatTemplates[0], // Default seconds object
    };

    $scope.changedTimeFormat = function (time_format) {
        'use strict';

        console.log('time changed');
        console.log(time_format);
        var newValue = time_format.value;

        // do your update settings stuffs
    }
});

As you can see in the fiddle output, whatever you choose for select box options, it is your custom value, or the 0, 1, 2 auto generated value by AngularJS, it does not matter in your output unless you are using jQuery or any other library to access the value of that select combo box options and manipulate it accordingly.

score 3 · Answer 19 · answered May 09 '17 at 11:00

3

Please use track by property which differentiate values and labels in select box.

Please try

<select ng-options="obj.text for obj in array track by obj.value"></select>

which will assign labels with text and value with value(from the array)

answered May 09 '17 at 11:00

Shashank Saxena

2,014
17
11

score 2 · Answer 20 · answered Oct 31 '13 at 08:45

2

For an object:

<select ng-model="mySelect" ng-options="key as value for (key, value) in object"></select>

answered Oct 31 '13 at 08:45

EpokK

38,062
9
61
69

score 2 · Answer 21 · edited Jun 20 '20 at 09:12

It is always painful for developers to with ng-options. For example: Getting an empty/blank selected value in the select tag. Especially when dealing with JSON objects in ng-options, it becomes more tedious. Here I have done some exercises on that.

Objective: Iterate array of JSON objects through ng-option and set selected first element.

Data:

someNames = [{"id":"1", "someName":"xyz"}, {"id":"2", "someName":"abc"}]

In the select tag I had to show xyz and abc, where xyz must be selected without much effort.

HTML:

<pre class="default prettyprint prettyprinted" style=""><code>
    &lt;select class="form-control" name="test" style="width:160px"    ng-options="name.someName for name in someNames" ng-model="testModel.test" ng-selected = "testModel.test = testModel.test || someNames[0]"&gt;
&lt;/select&gt;
</code></pre>

By above code sample, you might get out of this exaggeration.

Another reference:

score 2 · Answer 22 · edited Jan 07 '17 at 13:37

2

The tutorial ANGULAR.JS: NG-SELECT AND NG-OPTIONS helped me solve the problem:

<select id="countryId"
  class="form-control"
  data-ng-model="entity.countryId"
  ng-options="value.dataValue as value.dataText group by value.group for value in countries"></select>

edited Jan 07 '17 at 13:37

Peter Mortensen

30,738
21
105
131

answered Aug 31 '14 at 23:16

Ricardo Huertas

1,296
1
14
15

score 1 · Answer 23 · answered Apr 18 '15 at 02:15

1

<select ng-model="output">
   <option ng-repeat="(key,val) in dictionary" value="{{key}}">{{val}}</option>
</select>

answered Apr 18 '15 at 02:15

ethanneff

3,083
5
23
15

1

ngOptions provides some benefits such as reducing memory and increasing speed by not creating a new scope for each repeated instance, see: https://docs.angularjs.org/api/ng/directive/ngOptions – mggSoft May 26 '15 at 14:33

score 1 · Answer 24 · answered Jan 12 '17 at 07:03

Run the code snippet and see the variations. Here is note for quick understanding

Example 1(Object selection):- ng-option="os.name for os in osList track by os.id". Here track by os.id is important & should be there and os.id as should NOT have before os.name.
- The ng-model="my_os" should set to an object with key as id like my_os={id: 2}.
Example 2(Value selection) :- ng-option="os.id as os.name for os in osList". Here track by os.id should NOT be there and os.id as should be there before os.name.
- The ng-model="my_os" should set to a value like my_os= 2

Rest code snippet will explain.

angular.module('app', []).controller('ctrl', function($scope, $timeout){
  
  //************ EXAMPLE 1 *******************
  $scope.osList =[
    { id: 1, name :'iOS'},
    { id: 2, name :'Android'},
    { id: 3, name :'Windows'}
  ]
  $scope.my_os = {id: 2};
  
  
  //************ EXAMPLE 2 *******************
  $timeout(function(){
    $scope.siteList = [
          { id: 1, name: 'Google'},
          { id: 2, name: 'Yahoo'},
          { id: 3, name: 'Bing'}
        ];
   }, 1000);
    
    $scope.my_site = 2;
  
    $timeout(function(){
      $scope.my_site = 3;
    }, 2000);
})

fieldset{
  margin-bottom: 40px;
  }
strong{
  color:red;
  }

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.10/angular.min.js"></script>

<div ng-app="app" ng-controller="ctrl">

  <!--//************ EXAMPLE 1 *******************-->
  <fieldset>
    <legend>Example 1 (Set selection as <strong>object</strong>)</legend>
    
    <select ng-model="my_os" ng-options="os.name for os in osList track by os.id">
        <option value="">--Select--</option>
      </select>
    {{my_os}}
    
  </fieldset>
  
  
  <!--//************ EXAMPLE 2 *******************-->
  <fieldset>
    <legend>Example 2 (Set selection as <strong>value</strong>. Simulate ajax)</legend>
      <select ng-model="my_site" ng-options="site.id as site.name for site in siteList">
        <option value="">--Select--</option>
      </select>
      {{my_site}}
  </fieldset>
  
</div>

score 0 · Answer 25 · edited Jan 07 '17 at 13:43

Like many said before, if I have data something like this:

countries : [
              {
                 "key": 1,
                 "name": "UAE"
             },
              {
                  "key": 2,
                  "name": "India"
              },
              {
                  "key": 3,
                  "name": "OMAN"
              }
         ]

I would use it like:

<select
    ng-model="selectedCountry"
    ng-options="obj.name for obj  in countries">
</select>

In your Controller you need to set an initial value to get rid of the first empty item:

 $scope.selectedCountry = $scope.countries[0];

 // You need to watch changes to get selected value
 $scope.$watchCollection(function() {
   return $scope.selectedCountry
 }, function(newVal, oldVal) {
     if (newVal === oldVal) {
       console.log("nothing has changed " + $scope.selectedCountry)
     } 
     else {
       console.log('new value ' + $scope.selectedCountry)
     }
 }, true)

score 0 · Answer 26 · edited Jan 07 '17 at 13:45

Here is how I solve this problem in a legacy application:

In HTML:

ng-options="kitType.name for kitType in vm.kitTypes track by kitType.id" ng-model="vm.itemTypeId"

In JavaScript:

vm.kitTypes = [
    {"id": "1", "name": "Virtual"},
    {"id": "2", "name": "Physical"},
    {"id": "3", "name": "Hybrid"}
];

...

vm.itemTypeId = vm.kitTypes.filter(function(value, index, array){
    return value.id === (vm.itemTypeId || 1);
})[0];

My HTML displays the option value properly.

score 0 · Answer 27 · answered Oct 14 '17 at 14:24

ngOptions directive:

$scope.items = [{name: 'a', age: 20},{ name: 'b', age: 30},{ name: 'c', age: 40}];

Case-1) label for value in array:

<div>
    <p>selected item is : {{selectedItem}}</p>
    <p> age of selected item is : {{selectedItem.age}} </p>
    <select ng-model="selectedItem" ng-options="item.name for item in items">
    </select>
</div>

Output Explanation (Assume 1st item selected):

selectedItem = {name: 'a', age: 20} // [by default, selected item is equal to the value item]

selectedItem.age = 20

Case-2) select as label for value in array:

<div>
    <p>selected item is : {{selectedItem}}</p>
    <select ng-model="selectedItem" ng-options="item.age as item.name for item in items">
    </select>
</div>

Output Explanation (Assume 1st item selected): selectedItem = 20 // [select part is item.age]

How do I set the value property in AngularJS' ng-options?

27 Answers27

Update

How to remember this ugly stuff

HTML:

JSON:

HTML:

In HTML:

In JavaScript:

ngOptions directive:

Linked

Related