title: AngularJS <select> issues
body: <p>I'm having a weird problem. I'm using AngularJS in my app and I'm having issues with  tag. I have a Controller to have cities and states handled by my  elements:</p>
  
  <pre><code>function MeuController($scope, $http) {  
  
  $scope.states = [];  
  $scope.selectedState = '';  
  
  $scope.cities = [];  
  $scope.selectedCity = '';  
  
  $http.get('/state/GetStates').success(function(result) {  
      $scope.states = result;  
  });  
  
  $scope.getCities = function() {  
      $http.get('/cities/GetCitiesByState?state=' + $scope.selectedState).success(function(result) {  
          $scope.cities = result;  
      });  
  }  
  });  
  </code></pre>
  
  <p>At this point, everything is OK and easy to understand. But...</p>
  
  <p>When I create my  elements this way:</p>
  
  <pre><code>&lt;select class="span2" name="SelectedState" ng-model="selectedState"   
  ng-change="getCities()" ng-options="state.ID as state.Name for state in states"&gt;  
      &lt;option&gt;&lt;/option&gt;  
  &lt;/select&gt;  
  
  &lt;select class="span6" name="SelectedCity" ng-model="selectedCity"  
  ng-options="city.ID as city.Name for city in cities"&gt;  
      &lt;option&gt;&lt;/option&gt;  
  &lt;/select&gt;  
  </code></pre>
  
  <p>... my  elements aren't filled.</p>
  
  <p>If I try this way:</p>
  
  <pre><code>&lt;select class="span2" name="SelectedState" ng-model="selectedState"   
  ng-change="getCities()"&gt;  
      &lt;option ng-repeat="state in states" value="state.ID"&gt;{{state.Name}}&lt;/option&gt;  
  &lt;/select&gt;  
  
  &lt;select class="span6" name="SelectedCity" ng-model="selectedCity"&gt;  
      &lt;option ng-repeat="city in cities" value="city.ID"&gt;{{city.Name}}&lt;/option&gt;  
  &lt;/select&gt;  
  </code></pre>
  
  <p>Now the values are filled into the elements. Although, if I change the value of "selectedState" scope variable, my element doesn't "select" the right value? </p>
  
  <p>Anyone knows why?</p>
  
  <p>Thank you so much!</p>