title: angularjs ng-options select as custom object from the options array
body: <p>I am trying to fetch 2 different ids from ng-options object list and map the same into select model on user select. The model is mapped properly but the value is not shown on select box. </p>
  
  <p><a href="http://plnkr.co/edit/Z3ohLie4vpTvXhUiLfl6?p=preview" rel="noreferrer">http://plnkr.co/edit/Z3ohLie4vpTvXhUiLfl6?p=preview</a></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
      &lt;html ng-app="angularjs-starter"&gt;
  
        &lt;head lang="en"&gt;
          &lt;meta charset="utf-8"&gt;
          &lt;title&gt;Custom Plunker&lt;/title&gt;
          &lt;script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"&gt;&lt;/script&gt;
          &lt;link rel="stylesheet" href="style.css"&gt;
          &lt;script src="app.js"&gt;&lt;/script&gt;
        &lt;/head&gt;
  
        &lt;body ng-controller="MainCtrl"&gt;
          &lt;h1&gt;Select something&lt;/h1&gt;
          &lt;select ng-model="selectedItem" ng-options="{'id':item.id,'anotherid':item.anotherId} 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;/body&gt;
  
      &lt;/html&gt;
  </code></pre>
  
  <p>The Javascript:</p>
  
  <pre><code>var app = angular.module('angularjs-starter', []);
  
  app.controller('MainCtrl', function($scope) {
    $scope.items = [
      { id: 1, name: 'foo', anotherId: 11 },
      { id: 2, name: 'bar', anotherId: 22 },
      { id: 3, name: 'blah', anotherId: 33 }];
  });
  </code></pre>