Subsetting selector with filter

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js" ng:autobind></script>
<script>
function MyCntrl() {
  this.colors = [
    {name:'black', shade:'dark'},
    {name:'white', shade:'light'},
    {name:'red', shade:'darker'},
    {name:'blue', shade:'dark'},
    {name:'yellow', shade:'light'}
  ];
    
  this.search = 'dark';
    
  this.dofilter = function(item) {
     return item.shade === this.search;
  };
}
</script>
<div ng:controller="MyCntrl">
  <input ng:model="search">
  <select ng:model="color" ng:options="c.name group by c.shade for c in colors.$filter(dofilter)">
  </select>
</div>

CSS

.ng-invalid { border: 1px solid red; } 
body { font-family: Arial,Helvetica,sans-serif; }
body, td, th { font-size: 14px; margin: 0; }
table { border-collapse: separate; border-spacing: 2px; display: table; margin-bottom: 0; margin-top: 0; -moz-box-sizing: border-box; text-indent: 0; }
a:link, a:visited, a:hover { color: #5D6DB6; text-decoration: none; }
.error { color: red; }