title: Angular select adding empty element despite carefulness
body: <p>I have this html:</p>
  
  <pre><code>&lt;select ng-model="group.newCriterionType"&gt;
      &lt;option ng-repeat="type in group.availableTypes" value="{{type}}" ng-selected="$first"&gt;{{type}}&lt;/option&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p>And this model code (using jresig's <code>Class</code> mini-library)</p>
  
  <pre><code>var FilterGroup = Class.extend({
    className: 'FilterGroup',
    widgetType: 'group',
    init: function(name) {
      this.name = name;
      this.availableTypes = FilterTypes;
      this.newCriterionType = this.availableTypes[0];
      this.updateAvailableTypes();
    },
  });
  </code></pre>
  
  <p>However, I still get an empty element in my select. According to all the answers I've seen on SO so far, this is apparently the behaviour of when your model value contains an incorrect value. However:</p>
  
  <ul>
  <li>I added in some <code>console.log</code> statements to check the value</li>
  <li>This code is definitely being called because <code>availableTypes</code> is being set</li>
  <li>It's pulling it from the array it's looping from. How can this be an incorrect value?</li>
  <li>It persists even if i pull the ng-selected out</li>
  <li>It persists if I use ng-options instead of looping through them (though that then means i can't set the value to the be the same as the text without turning it into an object)</li>
  </ul>
  
  <p>Any clues much appreciated.</p>
  
  <p>James</p>