Javascript 一个ng选项取决于在另一个-AngularJS中选择的内容

我在AngularJS中有一个表单，其中一个下拉列表的选项取决于第一个下拉列表中选择的内容

<select ng-options="obj.name for obj in institutions track by obj.id" ng-model="newUser.institution">
</select>

<input type="text" name="email" ng-model="newUser.email">

<!-- DEPENDENT on what is selected in the previous dropdown -->
<select ng-options="obj.name for obj in organizations track by obj.id" ng-model="newUser.associatedOrg">
</select>

但是，第二个下拉列表中的那些“组织”基于它们的父表institution，因此我需要执行类似于

$scope.organizations=institution.memberOrganizations的操作中的code>在之后，从第一个下拉列表中选择一个选项

现在，为了确保一切正常，我为这个功能制作了一个名为“加载组织”的按钮，点击
ng
：

$scope.getOrganizationsOnCampus = function(institution) {
    $scope.organizations = institution.memberOrganizations;
};

这是可行的，但是这是一个非常糟糕的用户体验

所以我的问题是：如何在每次选择新机构时更新
$scope.organizations

我不想像在jQuery中那样去听DOM，因为我知道这是违反AngularJS最佳实践的方式

另外，为进一步明确起见，这里是单击“加载组织”按钮加载所选机构的子组织之前和之后的屏幕截图。这就是每次在上一个选项中选择不同机构时，我希望自动执行的操作

之前


之后

您会这样使用
ng change
：

function populate() {
    return Institutions.all().then(function (institutions) {
        $scope.institutions = institutions;
        return institutions;
    });
}

// at the end of the controller
populate();

<select ng-options="obj.name for obj in institutions track by obj.id" ng-model="newUser.institution" ng-change"updateOrg(newUser.institution)">
</select>

$scope.updateOrg = function(institution) {
    $scope.organizations = institution.memberOrganizations;
};

您会这样使用
ng change
：

function populate() {
    return Institutions.all().then(function (institutions) {
        $scope.institutions = institutions;
        return institutions;
    });
}

// at the end of the controller
populate();

<select ng-options="obj.name for obj in institutions track by obj.id" ng-model="newUser.institution" ng-change"updateOrg(newUser.institution)">
</select>

$scope.updateOrg = function(institution) {
    $scope.organizations = institution.memberOrganizations;
};