title: Angular js select binding
body: <p>I have looked at so many examples as to how to do this, but still can't seem to figure it out.
  I have setup a very simple angular app with controller and am trying to populate a single select tag. </p>
  
  <pre><code>&lt;body data-ng-app="App"&gt;
  &lt;div data-ng-controller="DemoController"&gt;
      {{var}}
      &lt;select data-ng-options="v.id as v.name for v in selectVals"&gt;
          &lt;option value=""&gt;Select&lt;/option&gt;
      &lt;/select&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  
  angular.module('App', []).controller('DemoController', function($scope) {
          $scope.var = 'a';
          $scope.selectVals = [
              { name: '1st', id: 1 }, 
              { name: '2nd', id: 2 }
          ];
  });
  </code></pre>
  
  <p>Here is the jsFiddle: <a href="http://jsfiddle.net/Fc5ne/3/" rel="nofollow noreferrer">http://jsfiddle.net/Fc5ne/3/</a> 
  Any help would be greatly appreciated.</p>
  
  <p>I already looked in these places and tried to compare my code, but am still missing something: <a href="https://docs.angularjs.org/api/ng/directive/select" rel="nofollow noreferrer">https://docs.angularjs.org/api/ng/directive/select</a>, <a href="http://jsfiddle.net/qWzTb/" rel="nofollow noreferrer">http://jsfiddle.net/qWzTb/</a>, <a href="http://jsfiddle.net/qm7E7/19/" rel="nofollow noreferrer">http://jsfiddle.net/qm7E7/19/</a>, <a href="https://stackoverflow.com/questions/17193957/angular-binding-objects-to-select">Angular: Binding objects to &lt;select&gt;</a>, ... as well as a few other stack overflow questions.</p>