Cascading Select/dropdowns

I'm attempting to create a chained/cascading drop-down (select elements) using AngularJS but I'm having difficulty filtering and updating the 'selected' properties with my object p

Solution 1:

You don't need a watch on this.. its easier than that. Comment out the filter, then change your ng-option as shown below. note, your last filter looked like it is using the wrong parent id (does the thirddrop down box relate to its parent or grand parent?)

<select
    class="form-control"
    ng-model="selectedParentItem"
    ng-options="p.displayName for p in parentItems">
</select>

<select
    class="form-control"
    ng-model="selectedChildItem"
    ng-options="c.displayName for c in childItems | filter:{parentId: selectedParentItem.id}">
</select>

<select
    class="form-control"
    ng-model="selectedGrandChildItem"
    ng-options="g.displayName for g in grandChildItems | filter:{parentId: selectedChildItem.parentId}">
</select>