title: AngularJS - ngModel bound dropdown value changes visually while variable doesn't
body: <p>I have a dropdown list:</p>
  
  <pre><code>&lt;select
     ng-model="filter.country"
     ng-options="country.code as country.name for country in countries"
     ng-change="broadcast()"&gt;
     &lt;option value=""&gt;All Countries&lt;/option&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p><code>$scope.countries</code> is initially populated by a service, and then another dropdown change event would limit the values of <code>$scope.countries</code> by calling the service again, passing by the other dropdown's selected item.</p>
  
  <p>The issue here is when <code>$scope.filter.country</code> is already bound to a value (other than the default value) and <code>$scope.countries</code> gets updated to a new list that doesn't include <code>$scope.filter.country</code>'s value. I can see countries dropdown reverting back to its default option "All Countries", however <code>$scope.filter.country</code> remains as it was.</p>
  
  <p>Any ideas about this scenario? Shouldn't <code>$scope.filter.country</code> get updated back to the default value?</p>
  
  <p><strong>Update:</strong> Here is a <a href="http://jsfiddle.net/LUm7y/" rel="nofollow noreferrer">fiddle</a></p>
  
  <p><strong>Update:</strong></p>
  
  <p>Just to illustrate this, here is a screenshot from the fiddle:
  <img src="https://i.stack.imgur.com/PrLu8.png" alt="enter image description here"></p>
  
  <p>This does look like a bug to me, I have opened an <a href="https://github.com/angular/angular.js/issues/7736" rel="nofollow noreferrer">issue</a> for it.</p>
  
  <p><strong>Update</strong>: This has been addressed and <a href="https://github.com/petebacondarwin/angular.js/commit/2d0a0a51d914d9b310c5d9f908590cad6c3b49e6" rel="nofollow noreferrer">fixed</a> by angularjs team; <a href="http://plnkr.co/edit/xySkDHjCmr3U56SRhbIm?p=preview" rel="nofollow noreferrer">demo here</a>.</p>