angularjs - $invalid 在 ng-if 条件下不起作用

Question

在 Angular 1.5 中，我有以下设置：

<form name="linksForm">
  <md-input-container>
    <label>Region</label>
    <md-select ng-model="$ctrl.user.region">
      <md-option ng-repeat="region in $ctrl.allRegions" value="{{region.id}}" ng-bind="region.name"></md-option>
    </md-select>
  </md-input-container>

  <md-input-container ng-if="$ctrl.user.region">
    <label>Territory</label>
    <md-select ng-model="$ctrl.user.territory" name="territory" required>
      <md-option ng-repeat="territory in $ctrl.getTerritories($ctrl.user.region)" value="{{territory.id}}" ng-bind="territory.name"></md-option>
    </md-select> 
  </md-input-container>

  <md-input-container ng-if="linksForm.territory.$valid">
    <label>House</label>
    <md-select ng-model="$ctrl.user.house">
      <md-option ng-repeat="house in $ctrl.allHouses" value="{{house.id}}" ng-bind="house.name"></md-option>
    </md-select>
  </md-input-container>
</form>

这是逻辑：

1. 起初，只有区域列表是可见的。
2. 选择区域后，将显示区域列表，其中包含来自所选区域的区域列表。
3. 选择区域后，会出现房屋列表。

到目前为止，一切都很好。事情奏效了。唯一的问题是当我更改区域时，会发生以下情况：

1. 区域列表发生变化，并且由于 ngModel 无法匹配任何新选项，因此区域选择器现在未设置。这按预期工作，但是......
2. 尽管需要选择器，但房屋列表不会消失territory，因此区域字段应该是无效的。