title: AngularJS Select Not Binding To Ng-Model
body: <p>My angular select isn't binding. I can tell the value is correct, but the select isn't updated. Why is not binding if the value is there?</p>
  
  <pre><code>&lt;div ng-controller="MyController" ng-app&gt;
      &lt;select class="form-control" ng-model="colorId"ng-options="color.id as color.name for color in colorList"&gt;
          &lt;option value=""&gt;--Select a Color--&lt;/option&gt;
      &lt;/select&gt;
  &lt;input type="button" value="submit" ng-click="Select()"&gt;&lt;/input&gt;
  </code></pre>
  
  <p></p>
  
  <pre><code>function MyController($scope) {
      $scope.colorList = [{
          id: '1',
          name: 'red'
      }, {
          id: '2',
          name: 'blue'
      }, {
          id: '3',
          name: 'green'
      }];
  
      var colorId = 3;
      $scope.colorId = colorId;
      alert($scope.colorId);
  
      $scope.Select = function () {
          var colorId = 2;
          $scope.colorId = colorId;
      }
  }
  </code></pre>
  
  <p>Here is a fiddle:</p>
  
  <p><a href="http://jsfiddle.net/ky5F4/23/" rel="nofollow">http://jsfiddle.net/ky5F4/23/</a></p>