AngularJS select：基于当前窗体状态限制Ngoption

我使用AngularJS生成一个表单，用于向函数提交参数。为了使其正常工作，我希望第二个select元素的可能选项取决于第一个元素上绑定模型的当前值

例如，第一个元素的选项表示在天、周或月之间选择提交时生成的数据集的单位。我试图实现的行为是，当在第一个元素中选择给定值时，第二个元素的可用选项将限制为小于或等于第一个元素中所选单位的任何单位

例如，如果我选择“天”作为一个单位，我可以选择的分组选项将仅限于“天”。如果我选择“周”，可用选项将扩展为“天”和“周”，对于选定的“月”单位，所有3个选项都将可用于分组

以下是相关的html：

<div ng-app="app">
    <form ng-submit="generate(unit, groupby)" ng-controller="AppCtrl">View from the last:
        <select class="form-control" ng-model="range" ng-options="r for r in ranges"></select>
        <select class="form-control" ng-model="unit" ng-options="(units.indexOf(u)) as u + '(s)' for u in units"></select>Grouped by:
        <select class="form-control" ng-model="groupby" ng-options="units.slice(0, unit + 1).indexOf(g) as g for g in units.slice(0, unit + 1)"></select>
        <input type="submit" value="Get Data" />
    </form>
</div>

上面的代码工作得很好，但有一个恼人的bug。考虑到为单位选择“月”和为分组选择“周”的情况，当用户随后将单位选择更改为不应将“周”作为有效选项的值（如“天”）时，$scope.groupby的值不会更改，允许用户能够提交本来应该是无效表单的内容

有没有其他的解决方法的建议

---

PS为ya做了一把小提琴

简单的修复方法是在控制器中添加一个观察者

$scope.$watch('unit', function(oldValue, newValue){
    $scope.groupby = 0;
});

---

请参考此说明。

好的，我已经考虑过了，但想知道是否我已经直接写入控制器的内容无法修复，谢谢！

$scope.$watch('unit', function(oldValue, newValue){
    $scope.groupby = 0;
});