title: selected option is not getting displayed Angularjs dropdownlist
body: <p>When I am using an object where I have property which has selectedOptions it is not getting displayed in the dropdownlist. However, when I put in scope and select from the object then it displayed. Anyone has any idea why the first one is not working. Here is the plunker link. </p>
  
  <p><a href="http://plnkr.co/edit/XLuXmAmh4F9OobyJhBCW?p=preview" rel="nofollow">http://plnkr.co/edit/XLuXmAmh4F9OobyJhBCW?p=preview</a></p>
  
  <pre><code>var app = angular.module('angularjs-starter', []);
  
  
  var model = {
     options : [
      { id: 1, name: 'foo' },
      { id: 2, name: 'bar' },
      { id: 3, name: 'blah' }],
      selectedOption : { id: 1, name: 'foo' }
  }
  
  app.value('vm',model);
  
  app.controller('MainCtrl', function($scope,vm) {
    $scope.vm =vm;
  
    $scope.items = [
      { id: 1, name: 'foo' },
      { id: 2, name: 'bar' },
      { id: 3, name: 'blah' }];
  
    $scope.selectedItem = $scope.items[1];
  });
  
  &lt;body ng-controller="MainCtrl"&gt;
      &lt;h1&gt;Select something below&lt;/h1&gt;
      &lt;select id="s1" ng-model="selectedItem" ng-options="item as item.name for item in items"&gt;&lt;/select&gt;
      &lt;h3&gt;The selected item:&lt;/h3&gt;
      &lt;pre&gt;{{selectedItem | json}}&lt;/pre&gt;
      &lt;h3&gt;The inner html of the select:&lt;/h3&gt;
      &lt;pre id="options" class="prettify html"&gt;&lt;/pre&gt;
  
  
        &lt;select data-ng-options="o.name for o in vm.options" data-ng-model="vm.selectedOption"&gt;&lt;option value=""&gt;Select one&lt;/option&gt;&lt;/select&gt;
        &lt;pre&gt;{{vm.selectedOption | json}}&lt;/pre&gt;
  
  
    &lt;/body&gt;
  </code></pre>