title: angularjs - Dropdown depends on other dropdown not working when id/name combo
body: <p>I've been using the solution provided by @Brocco here: <a href="https://stackoverflow.com/questions/26849859/dropdown-depends-on-other-dropdown-angularjs">Dropdown depends on other dropdown - angularjs</a></p>
  
  <p>I've noticed that when you use an ID/Name combo in the object for use by Angular it automatically fails. I've tested this with the provided <a href="http://jsfiddle.net/h8uoy9xr/" rel="nofollow noreferrer">JSFiddle</a> AngularJS version as well as the latest AngularJS version and in both instances it fails.</p>
  
  <p><strong>JSFiddle:</strong></p>
  
  <p><a href="http://jsfiddle.net/h8uoy9xr/" rel="nofollow noreferrer">http://jsfiddle.net/h8uoy9xr/</a> (updated fiddle link)</p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"&gt;&lt;/script&gt;
  &lt;div ng-app&gt;
      &lt;div ng-controller="MyCntrl"&gt;
          &lt;select ng-model="server" ng-options="server.id as server.name for server in servers"&gt;&lt;/select&gt;
          &lt;!-- server.name for server in servers (This works a treat, but not the other way) --&gt;
          &lt;select ng-model="version" ng-options="version.id as version.name for version in server.version"&gt;&lt;/select&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>JS:</strong></p>
  
  <pre><code>function MyCntrl($scope) {
  
  
      $scope.servers = 
         [
             {
                 "id": 1,
                 "name": "server1",
                 "version":
                 [
                     {id:1,name: "10.x"}
                 ]
             },
             {
                 "id": 2,
                 "name": "server2",
                 "version":
                 [
                     {id:2,name:"1"}, {id:3,name:"2"}
                 ]
             }
         ];
  
  
  }
  </code></pre>