AngularJS Forms - Populate options in a SELECT form element (drop down)

controller.js

angular.module('selectExample', [])
  .controller('ExampleController', ['$scope', function($scope) {
    $scope.colors = [
      {name:'black', shade:'dark'},
      {name:'white', shade:'light', notAnOption: true},
      {name:'red', shade:'dark'},
      {name:'blue', shade:'dark', notAnOption: true},
      {name:'yellow', shade:'light', notAnOption: false}
    ];
    $scope.myColor = $scope.colors[2]; // red
  }]);

ng-input-select.html

<!-- The proper way to do it is using the ng-options directive. 
	https://docs.angularjs.org/api/ng/directive/ngOptions
-->

<div ng-controller="ExampleController">

  <label>Color (null not allowed):
    <select ng-model="myColor" ng-options="color.name for color in colors"></select>
  </label><br/>
  
  <label>Color (null allowed):
  <span  class="nullable">
    <select ng-model="myColor" ng-options="color.name for color in colors">
      <option value="">-- choose color --</option>
    </select>
  </span></label><br/>

  <label>Color grouped by shade:
    <select ng-model="myColor" ng-options="color.name group by color.shade for color in colors">
    </select>
  </label><br/>

  <label>Color grouped by shade, with some disabled:
    <select ng-model="myColor"
          ng-options="color.name group by color.shade disable when color.notAnOption for color in colors">
    </select>
  </label><br/>

  Currently selected: {{ {selected_color:myColor} }}
  
  <div style="border:solid 1px black; height:20px"
       ng-style="{'background-color':myColor.name}">
  </div>
  
</div>