Angular: Selects

HTML

<script src="http://ci.angularjs.org/job/angular.js-angular-master/lastSuccessfulBuild/artifact/build/pkg/0.10.7-e86bafec/angular-0.10.7-e86bafec.js"></script>
<h3>Single select (required)</h3>
  color = {{simpleColor}} <a ng:click="simpleColor='black'">set to black</a>
  <select name="simple" ng:model="simpleColor" required>
    <option value="white">WHITE</option>
    <option value="black">BLACK</option>
    <option value="blue">BLUE</option>
  </select>

  <h3>Multi select (required)</h3>
  multi = {{multipleColor}} <a ng:click="multipleColor=['white', 'black']">set to white, black</a>
  <select name="multiple" ng:model="multipleColor" multiple="true" required>
    <option value="white">WHITE</option>
    <option value="black">BLACK</option>
    <option value="blue">BLUE</option>
  </select>

  <h3>Colors</h3>
  <ul>
    <li ng:repeat="color in colors">
      Name: <input ng:model="color.name">
      [<a href ng:click="remove(colors, color)">X</a>]
    </li>
    <li>
      [<a href ng:click="colors.push({})">add</a>]
    </li>
  </ul>
  <hr/>
  Color (null not allowed):
  <select ng:model="color" ng:options="c.name for c in colors" required></select><br>

  Color (null allowed):
  <div class="nullable">
    <select ng:model="color" ng:options="c.name for c in colors" required>
      <option value="">-- chose color --</option>
    </select>
  </div><br/>

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

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

  <h3>People multi (required)</h3>
    <div class="nullable">
      <select ng:model="person" multiple="true" ng:options="p.name for p in people" required>
        <option value="">-- chose color --</option>
      </select>
    </div><br/>

CSS

.ng-invalid {
    border-color: red;
}

.ng-valid {
    border-color: green;
}

.ng-dirty {
    border-style: solid;
    border-width: 2px;
}

.ng-pristine {
    border-style: solid;
    border-width: 1px;
}

.errors {
    color: red;
}

JavaScript

function Main($scope) {
  $scope.remove = function(collection, item) {
    var idx = collection.indexOf(item);
    if (idx === -1) return;
    collection.splice(idx, 1);
  };

  $scope.colors = [
    {name:'black', shade:'dark'},
    {name:'white', shade:'light'},
    {name:'red', shade:'dark'},
    {name:'blue', shade:'dark'},
    {name:'yellow', shade:'light'}
  ];
  $scope.color = $scope.colors[2]; // red

  $scope.people = [
    {name: 'Misko'},
    {name: 'Igor'},
    {name: 'Vojta'}
  ];
}