Create DropDownlist in AngularJS

I will describe the usage by creating a sample.

This example uses the ng-repeat and two way binding to create a HTML dropdown.

HTML Code:

<!DOCTYPE html>
<html ng-app>
<head>
<title>Simple app</title>
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">
</script>
<script>
function MyCtrl($scope) {
$scope.values = [
{'Dropdonw': 'D1'},
];
$scope.colorcode = [
{'hashCode': 'R', 'description': 'Red'},
{'hashCode': 'G', 'description': 'Green'},
{'hashCode': 'Y', 'description': 'Yellow'},
{'hashCode': 'P', 'description': 'Pink'}
];
}
</script>
</head>
<body >
<div ng-controller="MyCtrl" style="border:solid 1px red; top:200px;left:350px;height:600px;width:400px;">
<div ng-repeat="val in values">
Select the option
<select
ng-model="val.option"
ng-options="code.hashCode as code.description for code in colorcode"></select>
<tt>Option selected: {{val.option}}</tt>
</div>
</div>
</body>undefined
</html>

Explanation:

Created one div and specified the controller:
1. <div ng-controller="MyCtrl"></div>
Now I am using ng-repeat attribute to create the how many dropdown to be created. In this example using the $scope.values array.
Adding option to the Dropdown:

The ngOptions attribute can be used to dynamically generate a list of <option> elements for the <select>element using an array.

ng-options="code.hashCode as code.description for code in colorcode": It will loop through all the items in colorcode and create the options.

Output:

Output

Next Recommended Reading Bind DropDownList Using AngularJS