title: angularjs: cascade dropdown
body: <p>I'm trying to achieve a cascade dropdown in Angular. I thought it would just work naturally thanks to binding. See below:               </p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;select name="client" ng-model="selectedRequest.client" ng-options="c.name for c in clients track by c.id" required&gt;&lt;/select&gt;
  &lt;select id="department" ng-model="selectedRequest.department" ng-options="d.defaultLabel for d in selectedRequest.client.departments track by d.id"&gt;&lt;/select&gt;
  </code></pre>
  
  <p>When the view is loaded, it works, I can see the departments matching those bound to the client. However, whenever the selectedRequest.client changes, the source for the department dropdown should change too, but instead it becomes empty.</p>
  
  <p><strong>EDIT</strong></p>
  
  <p>I've changed the child dropdown to :</p>
  
  <pre><code>&lt;select id="department" ng-model="selectedRequest.department" ng-options="d.defaultLabel for d in departments track by d.id | filter:{clientId: selectedRequest.client.id}"&gt;&lt;/select&gt;
  </code></pre>
  
  <p>but this time it loads all the departments in the dropdown, ignoring the filter.</p>
  
  <p>** EDIT 2 **</p>
  
  <p>Changing to :</p>
  
  <pre><code> &lt;select name="client" ng-model="requestService.selectedRequest.client" ng-options="c as c.name for c in clients track by c.id" required&gt;&lt;/select&gt;
  
   &lt;select id="department" ng-model="requestService.selectedRequest.department" ng-options="d.defaultLabel for d in departments  | filter:{clientId: requestService.selectedRequest.client.id}"&gt;&lt;/select&gt;
  </code></pre>
  
  <p>Now the source changes correctly when a client is selected. However the initial selection, i.e setting the right department at startup, does not work. That's because I've removed the 'track by id' bit. </p>