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:
  1. <!DOCTYPE html>
  2. <html ng-app>
  3. <head>
  4. <title>Simple app</title>
  5. src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">
  6. </script>
  7. <script>
  8. function MyCtrl($scope) {
  9. $scope.values = [
  10. {'Dropdonw': 'D1'},
  11. ];
  12. $scope.colorcode = [
  13. {'hashCode': 'R', 'description': 'Red'},
  14. {'hashCode': 'G', 'description': 'Green'},
  15. {'hashCode': 'Y', 'description': 'Yellow'},
  16. {'hashCode': 'P', 'description': 'Pink'}
  17. ];
  18. }
  19. </script>
  20. </head>
  21. <body >
  22. <div ng-controller="MyCtrl" style="border:solid 1px red; top:200px;left:350px;height:600px;width:400px;">
  23. <div ng-repeat="val in values">
  24. Select the option
  26. <select
  27. ng-model="val.option"
  28. ng-options="code.hashCode as code.description for code in colorcode"></select>
  29. <tt>Option selected: {{val.option}}</tt>
  30. </div>
  31. </div>
  32. </body>undefined
  34. </html>
Explanation:

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

  3. 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