angular cascading dropdown based off one ng-model with multiple properties

Question

New to angular and need help with cascading multiple dropdowns. All 3 dropdowns are getting values based off one data source (ng-model) with multiple properties.

Example of model:

Org Table with Name, Division, Section fields. Name is not unique. Each Name has one entry with no Division or Section, AND then if there is a division name, there will be a null value for sections, and then repeats for each combination. Ex:
ORG: [
 { NAME: EPA, DIV: null, SECT: null},
 { NAME: EPA, DIV: Office of Water, SECT: null},
 { NAME: EPA, DIV: Office of Water, SECT: AED},
 { NAME: EPA, DIV: Office of Marine Protection, SECT: null},
 { NAME: DOI, DIV: null, SECT: null}, etc.

The goal is that when the user chooses a NAME, the Divisions would populate (including the null). When a user chooses a DIV, the sections will populate (including null). So far, I've tried a cascading example with Countries/States/Cities, but this information is coming from different ng-models. All of my information will be coming from 1 ng-model. I'm thinking maybe I need to do something with filtering, but with the model being the same for all 3 selects.. I'm not sure how to proceed. Thanks!!

Answer 1

I was trying too hard to have the view handle this with the help of angular/bootstrap magic. In the end, I used the help of my controller and just added an ng-change on each select.

<div class="form-group">
    <label class="col-md-2 control-label">Organization</label>
    <div class="col-md-10">
        <select id="inputORGANIZATION_N" name="NAME"
            ng-model="newOrg.NAME" ng-change="filterDivs($data)"
            ng-options="o.ORGANIZATION_ID as o.NAME for o in 
            allOrganizations | unique: 'NAME' | orderBy: NAME'">
        </select>
    </div>
</div>

<div class="form-group">
    <label class="col-md-2 control-label">Division</label>
    <div class="col-md-10">
        <select id="inputORGANIZATION_DIV" name="DIVISION"
            ng-model="newOrg.DIVISION" ng-change="filterSecs($data)"
            ng-options="d.ORGANIZATION_ID as d.DIVISION for d in
            filteredDivs | unique: 'DIVISION' | orderBy:'DIVISION'">
        </select>
    </div>
</div>

<div class="form-group">
    <label class="col-md-2 control-label">Section</label>
    <div class="col-md-10">
        <select id="inputORGANIZATION_SEC" name="SECTION"
            ng-model="newOrg.SECTION"
            ng-options="s.ORGANIZATION_ID as s.SECTION for s in
            filteredSecs | unique: 'SECTION' | orderBy: 'SECTION'">
        </select>
    </div>
</div>

then, my $scope.filteredDivs was updated based on the $data passed in ng-change event.

for (var i = 0; i < $scope.allOrganizations.length; i++) {
    if ($scope.allOrganizations[i].NAME == data.NAME) {
        $scope.filteredDivs.push($scope.allOrganizations[i]);
    };
};

And same for my sections, based on the $data passed from the ng-change on division.