key-value pairs in ng-options


I need to use an associative array as data source for my select options using AngularJS.

Is it possible to use an array like this?

    "key1": "val1",
    "key2": "val2",
    "key3": "val3",

and get something like this:

    <option value="key1">val1</option>
    <option value="key2">val2</option>
    <option value="key3">val3</option>

I read docs, but I can't understand how to achieve this.

Problem courtesy of: davioooh


use ng-option:

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

or use ng-repeat:

    <option ng-repeat="(key, value) in data" value="{{key}}">{{value}}</option>

data in controller:

$ = {
    "key1": "val1",
    "key2": "val2",
    "key3": "val3",
Solution courtesy of: Chen-Tsu Lin


Answer by Chen-Tsu Lin actually gives both ways of accessing objects. Just want to add few more lines -

Because the ng-repeat directive repeats a block of HTML code for each item in an array, it can be used to create options in a dropdown list, but the ng-options directive was made especially for filling a dropdown list with options and has at least one important advantage:

Dropdowns made with ng-options allows the selected value to be an object, while dropdowns made from ng-repeat has to be a string.

Adding an example for the reference:

ng-repeat :


For complete reference, head onto

Discussion courtesy of: Janusz01

The following article discusses the variety of ways that you can use ngOptions (by far the clearest, most thorough explanation I've ever seen):

Discussion courtesy of: Markus Hay

This recipe can be found in it's original form on Stack Over Flow.