Attempting to create a cascade dropdown in Angular, I assumed it would work seamlessly with binding. Here is the code snippet:
<select name="client" ng-model="selectedRequest.client" ng-options="c.name for c in clients track by c.id" required></select>
<select id="department" ng-model="selectedRequest.department" ng-options="d.defaultLabel for d in selectedRequest.client.departments track by d.id"></select>
Initially, when the view loads, it functions correctly displaying departments associated with the selected client. However, upon changing the selected client, the department dropdown empties instead of updating as expected.
EDIT
I modified the child dropdown to :
<select id="department" ng-model="selectedRequest.department" ng-options="d.defaultLabel for d in departments track by d.id | filter:{clientId: selectedRequest.client.id}"></select>
This time, all departments are loaded into the dropdown irrespective of the filter applied.
** EDIT 2 **
Updated to :
<select name="client" ng-model="requestService.selectedRequest.client" ng-options="c as c.name for c in clients track by c.id" required></select>
<select id="department" ng-model="requestService.selectedRequest.department" ng-options="d.defaultLabel for d in departments | filter:{clientId: requestService.selectedRequest.client.id}"></select>
Now, selecting a client triggers the source change correctly. However, setting the initial department at startup fails due to the removal of 'track by id'.