Question

I am going thru AngularJs tutorial. In step 4 http://docs.angularjs.org/tutorial/step_04 instead of hard coded Select tag I created a JavaScript object just to test.

This is the javascript code I added to controller.js

 $scope.sortOptions = [{
        "optionValue": "name",
        "desc": "Alphabetical"
    }, {
        "optionValue": "age",
        "desc": "Newest"
    }];

Now $scope.orderProp = “age” is not working. (which suppose to set default value for the select). I want to know what is issue here.

Answer 1

Use the ng-options attribute on the <select> to create the <option> entries, like this:

<select ng-model="orderProp" 
        ng-options="option.optionValue as option.desc for option in sortOptions">                        
</select>

The option.optionValue as option.desc for option in sortOptions corresponds to:

• iterate over the sortOptions array and assign each item to a option variable
• set the label of each <option> as option.desc
• set the value of each <option> as option.optionValue

More information about this here: http://docs.angularjs.org/api/ng.directive:select

jsFiddle: http://jsfiddle.net/bmleite/m6Z5Z/2/