I want to create cascading drop-down menus in Angular, where each menu populates based on the selection made in the previous one. There will be a total of 5 dropdowns, with only the first one initially populated. The subsequent dropdowns should populate based on the selections made in the previous dropdowns, potentially using $http to retrieve new data from the server.
This is what I have so far:
<select class="selectScope" ng-model="scope1">
<option ng-repeat="obj in array" value="{{obj.id}}">{{obj.name}}</option>
</select>
<select class="selectLevel1" ng-model="scope2">
<option ng-repeat="obj in array" value="{{obj.id}}">{{obj.name}}</option>
</select>
<select class="selectLevel2" ng-model="scope3">
<option ng-repeat="obj in array" value="{{obj.id}}">{{obj.name}}</option>
</select>
<select class="selectLevel3" ng-model="scope4">
<option ng-repeat="obj in array" value="{{obj.id}}">{{obj.name}}</option>
</select>
<select class="selectLevel4" ng-model="scope5">
<option ng-repeat="obj in array" value="{{obj.id}}">{{obj.name}}</option>
</select>
I know how to populate the first dropdown using $http, but without going into details, my question is whether it's possible to make these dropdowns trigger off of each other. For example, if I re-select level 3 after selecting all the way down to level 5, then levels 4 and 5 would reset (with 4 repopulating based on the new selection in 3). Simply put, I want them to interact dynamically. Is this achievable in Angular? I apologize if this sounds basic, as I am completely new to using Angular. Thank you!