Ng-options is an attribute for selecting control types and is used to generate a list of options for selecting boxes dynamically.
However, we can use ng-repeat to render the options but ng-options has its own benefits with respect to render speed, flexibility, and memory consumption.
Using ng-options for simple array like array of strings
Using ng-options for simple array like array of strings
Let's say we have the following array.
And if we want to show them in dropdown using ng-options, we can write the following snippet in our HTML.
- $scope.qualificationsList = [‘SSC’, ’Intermediate’, ’Graduation’, ’Post-Graduation’,’Doctorate’];
- <select name="qualification" ng-model="selectedQualification" data-ng-options=" qualification as qualification for qualification in qualificationsList"></select>
And, we will get this result in HTML.
- <option value="?" selected="selected" label=""></option>
- <option value="0" label="SSC">SSC</option>
- <option value="1" label="Intermediate">Intermediate</option>
- <option value="2" label="Graduation">Graduation</option>
- <option value="3" label="Post-Graduation">Post-Graduation</option>
- <option value="4" label="Doctorate">Doctorate</option>
- <select name="qualification" ng-model="selectedQualification" data-ng-options=" qualification as qualification for qualification in qualificationsList track by qualification"></select>
Now, this will result as -
- <option value="?" selected="selected" label=""></option>
- <option value="SSC" label="SSC">SSC</option>
- <option value="Intermediate" label="Intermediate">Intermediate</option>
- <option value="Graduation" label="Graduation">Graduation</option>
- <option value="Post-Graduation" label="Post-Graduation">Post-Graduation</option>
- <option value="Doctorate" label="Doctorate">Doctorate</option>
But ng-model will be assigned the right value anyway, even we don’t use track by.
Ng-options for array of custom data types
If we have an array of objects like
- $scope.qualificationsList = [{id : 1, name : 'SSC'},{id : 2, name : 'Intermediate'},{id : 3, name : 'Graduation'},{id : 4, name : 'Post-Graduation'},{id : 5, name : 'Doctorate'}];
- <select name="qualification" ng-model="selectedQualification" data-ng-options=" qualification.id as qualification.name for qualification in qualificationsList"></select>
In this case, when you click on option in dropdown, it shows the names of the object but internally, the id of the object will be mapped to model.

Join the conversation! Your thoughts help the community grow.