Estoy intentando crear un desplegable encadenado / en cascada (seleccionar elementos) utilizando AngularJS pero tengo dificultades para filtrar y actualizar las propiedades 'seleccionadas' con las propiedades de mi objeto.

Cuando la página se carga por primera vez, los elementos seleccionados se filtran y se muestran correctamente en los menús desplegables. Una vez que cambio el menú desplegable principal, el elemento seleccionado secundario no captura el primer elemento de la lista filtrada, lo que hace que el menú desplegable de nietos no se actualice.

Cualquier información sería muy apreciada y tenga en cuenta que tengo los arreglos de padres / hijos / nietos separados (y no en sub-arreglos) porque eventualmente extraeré mis datos de tablas / spocs separados en SQL. Si hay una forma fácil de crear los subarreglos en JSON, entonces estaría dispuesto a cambiar la estructura de datos.

Aquí estáun enlace a un ejemplo codificado

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>

Controlador

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];
}