title: AngularJS: Updating ngModel property when select options change
body: <p>It is easy to use Angular data binding to force a JavaScript property to change when a user changes the item selected in a menu.  However, I cannot figure out how to force a data bound property to change when the model used to generate a menu changes.  </p>
  
  <p>This fiddle demonstrates the behavior:  <a href="http://jsfiddle.net/2pHGX/" rel="nofollow">http://jsfiddle.net/2pHGX/</a>.  Changing the model by clicking changeOptions causes the select options to change correctly.  But the data bound property does not change immediately, it only changes when the user selects a different menu option.  </p>
  
  <pre><code>&lt;body ng-app ng-controller="bodyCtrl"&gt;
      &lt;select ng-model="selection" ng-options="option for option in options"&gt;
      &lt;/select&gt;
      &lt;button ng-click="changeOptions()"&gt;changeOptions&lt;/button&gt;
      &lt;br&gt;
      selection: {{selection}}
  &lt;/body&gt;
  
  function bodyCtrl($scope) {
      $scope.options = [10, 20, 30];
      $scope.changeOptions = function() {
          $scope.options = [11, 22, 33];
      };
  }
  </code></pre>
  
  <p>I want the data bound property to update when the selected option changes for any reason, either because the user picked a different option or because the model, and therefore options, changed.  I can make this work with <code>$watch</code>, but I cannot understand why data binding alone is not sufficient.  What is the best way to accomplish this with Angular?  Am I misunderstanding something fundamental about data binding?  </p>