title: Angular: Drop Down Item active based on model dependency
body: <p>I'd like the active state of items in one drop-down list to be contingent on properties from a second model:</p>
  
  <pre><code>angular.module('mainApp')
    .controller('MainCtrl', function($scope) {
    $scope.departments = [
      {id:0, name: 'Dry Goods'},
      {id: 1, name:'Frozen Food'},
      {id: 2, name:'Electronics'}
    ];
    $scope.categories = [
      {id: 0, name: 'cereal', departmentId: 0},
      {id: 1, name: 'cookies', departmentId: 0},
      {id: 2, name: 'televisions', departmentId: 2}
    ];
  });
  </code></pre>
  
  <p>and the drop-downs:</p>
  
  <pre><code>&lt;select ng-model="department" ng-options="department.name for department in departments" ng-change="changeDepartment()"&gt;
    &lt;option value=""&gt;Department&lt;/option&gt;
  &lt;/select&gt;
  
  &lt;select ng-model="category" ng-options="category.name for category in categories" ng-change="changeCategory()"&gt;
    &lt;option value=""&gt;Category&lt;/option&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p>I'd like the Department drop-down to display all three items, but only 'Dry goods' and 'Electronics' should be selectable because there are items in Category that map to Department through the departmentId property. Frozen food should be grayed out.</p>
  
  <p>Plunker : <a href="http://plnkr.co/edit/c7rZ05qqRCnB7L0ANgZ4?p=preview" rel="nofollow">http://plnkr.co/edit/c7rZ05qqRCnB7L0ANgZ4?p=preview</a></p>
  
  <p>Thanks in advance.</p>