Cascading select options in angular

Question

I cannot get cascading dropdown selects to work pas the first one in angular. On selecting the first option, if it has values for divisions I'd like to show them in the second dropdown, and if the latter has values for workplaces I'd like to show them in the third.

Here is my html

<div ng-controller="SectorController">
<select class="form-control" id="businessUnit" ng-model="divisionsSource" 
            ng-options="businessUnit.division as businessUnit.sectorName for businessUnit in businessUnits track by businessUnit.id">
                <option value=''>Select</option>
            </select>

        <td>
          <select class="form-control" id="division" ng-model="workplacesSource" ng-disabled="!divisionsSource"
          ng-options="division.workplace as division.sectorName for division in divisionsSource track by division.id">
            <option value=''>Select</option>
          </select>

          <select class="form-control" id="workplace" ng-disabled="!workplacesSource || !divisionsSource" ng-model="workplace">
          <option value=''>Select</option> 
          <option ng-repeat="workplace in workplacesSource" value='{{workplace}}'>{{workplace}}</option>
          </select>  

and here is my json feed:

$rootScope.businessUnits = [
                      {
                        "id": 1,
                        "sectorName": "AAA",
                        "sectorLevel": 20
                      },
                      {
                        "id": 2,
                        "sectorName": "BBB",
                        "sectorLevel": 20
                      },
                      {
                        "id": 3,
                        "sectorName": "CCC",
                        "sectorLevel": 20
                      },
                      {
                        "id": 4,
                        "sectorName": "DDD",
                        "sectorLevel": 20,
                        "divisions": [
                          {
                            "id": 6,
                            "sectorName": "DDD1",
                            "sectorLevel": 30
                          },
                          {
                            "id": 7,
                            "sectorName": "DDD2",
                            "sectorLevel": 30
                          },
                          {
                            "id": 8,
                            "sectorName": "DDD3",
                            "sectorLevel": 30
                          },
                          {
                            "id": 9,
                            "sectorName": "DDD4",
                            "sectorLevel": 30,
                            "workplaces": [
                              {
                                "id": 12,
                                "sectorName": "DDD4 SUB1",
                                "sectorLevel": 40
                              },
                              {
                                "id": 13,
                                "sectorName": "DDD4 SUB2",
                                "sectorLevel": 40
                              }
                            ]
                          },
                          {
                            "id": 10,
                            "sectorName": "DDD5",
                            "sectorLevel": 30
                          },
                          {
                            "id": 11,
                            "sectorName": "DDD6",
                            "sectorLevel": 30
                          }
                        ]
                      },
                      {
                        "id": 5,
                        "sectorName": "EEE",
                        "sectorLevel": 20
                      }
                    ]

Any input will be greatly appreciated.

Answer 1

Your ng-options aren't correct. Here's a plunkr which fixes it: http://plnkr.co/edit/GOIiGXAHnr7nUfv4NHVH?p=preview

Explanations:

businessUnit.division as businessUnit.sectorName 
for businessUnit in businessUnits track by businessUnit.id

So, when an option is selected in this first select box, its model (divisionsSource) is set to the selected businessUnit's division. But a businessUnit doesn't have a field named division. It has a field named divisions.

So the code should be

businessUnit as businessUnit.sectorName 
for businessUnit in businessUnits track by businessUnit.id

and the next select box should use

division as division.sectorName 
for division in divisionsSource.divisions track by division.id