AngularJS ng-options Directive
Last Updated :
11 Jul, 2025
Improve
The ng-options Directive in AngularJS is used to build and bind HTML elements with options to a model property. It is used to specify <options> in a <select> list. It is designed specifically to populate the items on a dropdown list. This directive implements an array, in order to fill the dropdown list. It is supported by the <select> element.
Syntax:
<element ng-options="expression">
Content ...
</element>
Parameter value:
- expression: It selects the particular portion of an array to fill the selected element.
Example 1: This example implements the ng-options Directive to display the option element in AngularJS.
<!DOCTYPE html>
<html>
<head>
<title>ng-options Directive</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
</script>
</head>
<body ng-app="app" style="text-align: center">
<h1 style="color:green">
GeeksforGeeks
</h1>
<h3>ng-options Directive</h3>
<div ng-controller="geek"
ng-init="StudentId=1"> Sorting Algorithms:
<select ng-model="Sorting" ng-options="sort.name as
sort.name for sort in sorting"></select>
<br><br><br> Selected sorting algorithm:
<input type="text" ng-model="Sorting" />
</div>
<script>
var app = angular.module("app", []);
app.controller('geek', ['$scope', function($scope) {
$scope.sorting = [{
name: 'Merge sort',
id: 1
}, {
name: 'Quick sort',
id: 2
}, {
name: 'Bubble sort',
id: 3
}];
}]);
</script>
</body>
</html>
Output:
Example 2: This example implements the ng-options Directive to hide or display the element in AngularJS.
<!DOCTYPE html>
<html>
<head>
<title>ng-options Directive</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
</script>
</head>
<body ng-app="app"
style="text-align: center">
<h1 style="color:green">GeeksforGeeks</h1>
<h3>ng-options Directive</h3>
<div ng-controller="geek" ng-init="Id=1"> Choose:
<select ng-model="hide" ng-options="show.hide
as show.name for show in HideShow">
</select>
<br><br>
<span ng-hide="hide">
Check to hide
<input type="checkbox"
ng-model="hide" />
</span>
</div>
<script>
var app = angular.module("app", []);
app.controller('geek', ['$scope', function($scope) {
$scope.HideShow = [{
name: 'Hide',
hide: true,
}, {
name: 'Show',
hide: false
}];
}]);
</script>
</body>
</html>
Output:
