一个ng-options取决于另一个选项 - AngularJS

Question

我在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>

从数据库中的可用机构直接加载机构。这是在控制器中完成的，如下所示：

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

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

然而，那些＆＃34;组织＆＃34;在第二个下拉列表中基于他们的父表机构，因此我需要在控制器中执行$scope.organizations = institution.memberOrganizations;之类的操作从第一个下拉列表中选择一个选项。

现在，为了确保工作正常，我已经制作了一个名为＆＃34;加载组织＆＃34;使用ng-click来执行此功能：

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

这是有效的，但这是一个非常糟糕的用户体验。

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

我想在不听DOM的情况下这样做 - 就像你在jQuery中那样，因为我知道方式反对AngularJS最佳实践。

P.S。为了进一步清晰起见，这里是之前和之后的屏幕截图＆＃34;加载组织＆＃34;单击按钮，以加载所选机构的子组织。这是我希望每次在上一个选项中选择不同的机构时自动执行的操作。

BEFORE

AFTER

Answer 1

你会像这样使用<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;
};

然后在你的控制器中，你有这样的功能：

.bind(this)