Я пытаюсь создать цепочечный / каскадный раскрывающийся список (выбрать элементы) с помощью AngularJS, но у меня возникают трудности с фильтрацией и обновлением «выбранных» свойств с помощью свойств моего объекта.

При первой загрузке страницы выбранные элементы фильтруются и отображаются в раскрывающихся списках должным образом. Когда я меняю родительский раскрывающийся список, выбранный дочерний элемент не захватывает первый элемент в отфильтрованном списке, в результате чего раскрывающийся список внука не обновляется.

Любая идея будет принята с благодарностью, и обратите внимание, что у меня есть массивы родительский / дочерний / внучатый (а не вложенные массивы), потому что в конечном итоге я буду извлекать свои данные из отдельных spocs / таблиц в SQL. Если есть простой способ создания подмассивов в JSON, я бы хотел изменить структуру данных.

Вотссылка к закодированному примеру

HTML

<div ng-controller="dropdownCtrl" >                    
  <div>
     <select 
       ng-model="selectedParentItem"                        
       ng-options="p.displayName for p in parentItems">                        
     </select>
  </div>
  <div>
     <select                                                    
       ng-model="selectedChildItem"                     
       ng-options="c.displayName for c in filteredArray | filter:{parentId:           
         selectedParentItem.id}">                        
     </select>
  </div>
  <div>
     <select                                                    
       ng-model="selectedGrandChildItem"                        
       ng-options="g.displayName for g in grandChildItems | filter:{parentId: 
         selectedChildItem.parentId}">                        
     </select>
  </div>
</div>

контроллер

function dropdownCtrl($scope, filterFilter) {
$scope.parentItems = [
    {
        "id": 0,
        "displayName": "parent 00"
    },
    {
        "id": 1,
        "displayName": "parent 01"
    },
    {
        "id": 2,
        "displayName": "parent 02"
    }
  ];
$scope.selectedParentItem = $scope.parentItems[0];

$scope.childItems = [
    {
        "id": 0,
        "displayName": "child0 of 00",
        "parentId": 0
    },
    {
        "id": 1,
        "displayName": "child1 of 00",
        "parentId": 0
    },
    {
        "id": 2,
        "displayName": "child2 of 00",
        "parentId": 0
    },
    {
        "id": 3,
        "displayName": "child0 of 01",
        "parentId": 1
    },
    {
        "id": 4,
        "displayName": "child1 of 01",
        "parentId": 1
    },
    {
        "id": 5,
        "displayName": "child0 of 02",
        "parentId": 2
    }
];
$scope.filteredArray = [];
$scope.$watch("parentId", function (newValue) {
    $scope.filteredArray = filterFilter($scope.childItems, newValue);
    $scope.selectedChildItem = $scope.filteredArray[0];
},true);


$scope.grandChildItems = [
    {
        "id": 0,
        "displayName": "grandChild0 of 00",
        "parentId": 0
    },
    {
        "id": 1,
        "displayName": "grandChild1 of 00",
        "parentId": 0
    },
    {
        "id": 2,
        "displayName": "grandChild2 of 00",
        "parentId": 0
    },
    {
        "id": 3,
        "displayName": "grandChild0 of 01",
        "parentId": 1
    },
    {
        "id": 4,
        "displayName": "grandChild1 of 01",
        "parentId": 1
    },
    {
        "id": 5,
        "displayName": "grandChild0 of 02",
        "parentId": 2
    }
];
$scope.selectedGrandChildItem = $scope.grandChildItems[0];
}