1.2.29/docs/examples/example-example86/index-jquery.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Example - example-example86-jquery</title>
  

  <script src="../../components/jquery-2.1.1/jquery.js"></script>
  <script src="../../../angular.js"></script>
  

</head>
<body ng-app="selectExample">
    <script>
  angular.module('selectExample', [])
    .controller('ExampleController', ['$scope', function($scope) {
      $scope.colors = [
        {name:'black', shade:'dark'},
        {name:'white', shade:'light'},
        {name:'red', shade:'dark'},
        {name:'blue', shade:'dark'},
        {name:'yellow', shade:'light'}
      ];
      $scope.myColor = $scope.colors[2]; // red
    }]);
  </script>
  <div ng-controller="ExampleController">
    <ul>
      <li ng-repeat="color in colors">
        Name: <input ng-model="color.name">
        [<a href ng-click="colors.splice($index, 1)">X</a>]
      </li>
      <li>
        [<a href ng-click="colors.push({})">add</a>]
      </li>
    </ul>
    <hr/>
    Color (null not allowed):
    <select ng-model="myColor" ng-options="color.name for color in colors"></select><br>

    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><br/>

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


    Select <a href ng-click="myColor = { name:'not in list', shade: 'other' }">bogus</a>.<br>
    <hr/>
    Currently selected: {{ {selected_color:myColor}  }}
    <div style="border:solid 1px black; height:20px"
         ng-style="{'background-color':myColor.name}">
    </div>
  </div>
</body>
</html>