title: Unable to use 2 way binding on SELECT element in Angular JS programmably
body: <p>I am having the hardest time getting two way binding to work for SELECT elements.  I am trying to change the selected element programmably.  I've found several Stackoverflow examples for binding the change event for SELECT, but I've not been many going the other way, where your application code changes the selected element.  </p>
  
  <p>There have been a few that I've found that use ng-repeat on an OPTION element but I've a) not been able to get it to work, and b) does not seem to be the "Angular Way".</p>
  
  <p>HTML Code:</p>
  
  <pre><code>&lt;div ng-controller="SIController"&gt;
  &lt;select id="current-command" ng-model="currentCommand"
  ng-options="c as c.label for c in availableCommands track by c.id"&gt;&lt;/select&gt;
  &lt;button ng-click="changeSelectedOption()"&gt;Select "open"&lt;/button&gt;
  </code></pre>
  
  <p></p>
  
  <p>Controller Code:</p>
  
  <pre><code>var myApp = angular.module('myApp', []);
  
  function SIController($scope) {
  
      $scope.availableCommands = [
          {id: 'edit',        label: 'Edit'},
          {id: 'open',        label: 'Open'},
          {id: 'close',       label: 'Close'}
      ];
  
      $scope.currentCommand = "close";
      $scope.changeSelectedOption = function() {
          $scope.currentCommand = 'open';
      };  
  };
  </code></pre>
  
  <p>I can verify that $scope.currentCommand is changing when the button is clicked, but the OPTION does not seem to be getting selected.</p>
  
  <p><a href="http://jsfiddle.net/bzhkkw18/5/" rel="nofollow">Fiddle here</a></p>