javascript - Angular-modellen uppdateras inte efter att ett valt alternativ har filtrerats bort

Försöker lista ut varför modellen inte uppdateras när det bundna valda alternativet inte längre finns. Jag skulle förvänta mig att modellens egenskap uppdateras till undefined/null/tom sträng.

Situation: En select styr en annan select med hjälp av filter. Efter att val har gjorts, gå till den ursprungliga select och välj ett annat alternativ. Filtret kommer att ta bort alternativet i den andra select som förväntat, men modellens egenskap på den andra select kommer att förbli oförändrad.

Problem: När du går för att skicka modellen kommer den att fyllas med dåliga/tidigare värden. Dessutom, när du använder Angular-validering, är select obligatorisk... formuläret är tekniskt sett "giltigt" eftersom modellen har ett värde (det tidigare värdet) för egenskapen.

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>

Modell :

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

Jag är ganska säker på att jag skulle kunna koppla en ng-change-funktion till den första för att tvinga den att uppdatera modellen, men finns det ett bättre sätt?

Exempel Plunker som demonstrerar problemet

Svar #1

Prova på det här sättet:

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