Il modello angolare non si aggiorna dopo che l'opzione selezionata è stata filtrata

Question

Cercando di capire perché il modello non si aggiorna quando l'opzione selezionata associata non esiste più. Mi aspetto che la proprietà del modello si aggiorni alla stringa non definita/nulla/vuota.

Situazione: Uno select guida un altro select utilizzando il filtro. Dopo aver effettuato le selezioni, vai allo select originale e scegli un'altra opzione. Filtro rimuoverà la seconda opzione select come previsto, ma la proprietà del modello sul secondo select rimarrà invariata.

Problema: Quando si passa al modello, questo verrà popolato con valori errati/precedenti. Inoltre, utilizzando la convalida Angolare, è richiesto il select ... il modulo è tecnicamente "valido" perché il modello ha un valore (il valore precedente) per la proprietà.

HTML:

<select name="Category" ng-model="selectedCategory" 
     ng-options="item.name as item.name for item in categories"> 
    <option value="">All Categories</option> 
</select> 

<select name="SubCategory" ng-model="selectedSubCategory" 
     ng-options="item.name as item.subCategory for item in categories | filter:selectedCategory"> 
    <option value="">All SubCategories</option> 
</select> 

Modello:

app.controller('MainCtrl', function($scope) { 
    $scope.categories = [{ 
     "id": "1", 
     "name": "Truck", 
     "subCategory": "Telescope" 
    }, { 
     "id": "2", 
     "name": "Truck", 
     "subCategory": "Hazmat" 
    }, { 
     "id": "3", 
     "name": "Van", 
     "subCategory": "Mini" 
    }]; 
}); 

sono abbastanza certo che potrei legare una funzione ng-modifica il primo a forzarlo per aggiornare il modello, ma c'è un modo migliore?

Esempio Plunker dimostrando il problema

Answer 1

provare in questo modo:

$scope.$watch('selectedCategory', function(selectedCategory){ 
    $scope.selectedSubCategory = null; 
});