Angularjs Modals和Promises控制流程

Question

我的应用程序流程存在一些问题。我正在尝试使用模态创建新项目时刷新列表。

这就是逻辑应该是：

1. 点击新组按钮Modal显示，
2. 填写表格提交表格，数据发送到服务
3. 服务创建新组并调用getGroup()
4. getGroups检索新的组列表，服务结算
5. 服务完成后，我需要在主ctrl中设置变量，以便DOM反映新的变化

HTML：

<div class="topPanel">
    <div class="topRow">
        <label for="entityDropDown">Select a Group:</label>
        <select id="entityDropDown" ng-model="selectedGroup" ng-options="group as group.name for group in groups" ng-change="getGroupInfo(selectedGroup)"></select>
        <button type="button" class="delGroupBtn btn-danger" ng-disabled="!selectedGroup" ng-click="deleteGroup()">&#10006;</button>
        <button type="button" class="delGroupBtn btn-success" ng-click="newGroup()">New Group</button>
    </div>
    <div class="userGroups" ng-show="selectedGroup">
        <div>
            <label for="entityAvailable">Available Users</label>
            <select id="entityAvailable" multiple ng-model="selectedAvailableUsers" ng-options="u.name for u in availableUsers | orderBy: 'name'"></select>
        </div>
        <div id="moveButtons">
            <button type="button" ng-disabled="!selectedGroup || availableUsers.length === 0 || selectedAvailableUsers.length === 0" ng-click="manageGroup(true)">Add to Group</button>
            <button type="button" ng-disabled="!selectedGroup || assignedUsers.length == 0 || selectedAssignedUsers.length === 0" ng-click="manageGroup(false)">Remove from Group</button>
        </div>
        <div>
            <label for="entityAssigned">Users In Group</label>
            <select id="entityAssigned" multiple ng-model="selectedAssignedUsers" ng-options="u.name for u in assignedUsers | orderBy:'name'"></select>
        </div>
    </div>
    <br class="clearfix" />
</div>

groupCtrl：

$scope.newGroup = function (){
    var d = $q.defer();
    var modalForm = '/Style%20Library/projects/spDash/app/partials/newGroup.html';
    var modalInstance = $modal.open({
        templateUrl: modalForm,
        backdrop: true,
        windowClass: 'modal',
        controller: newGroupCtrl,
        resolve:{
            newGroup:function (){
                return  $scope.newGroup;
            }
        }       
    });
    $scope.selectedGroup = false;
    $scope.groups = groupService.getGroups();
    d.resolve();
    return d.promise;
};

 /*At first I wanted to set newGroups to return a promise and then manipulate the $scope elements.But I got error then() is not a function of $scope.newGroup so I had to move the scope elements up into the function but now it runs before the service is even done. */

    /*$scope.newGroup.then(function(){
        $scope.selectedGroup = false;
        $scope.groups = groupService.getGroups();
    },
    function(){
        console.log('failed to create new group');
    });*/

模态newGroupCtrl：

var newGroupCtrl = function ($scope, $modalInstance, groupService){
    $scope.newGroup = {};

    $scope.submit = function(){
        console.log('creating new group');
        console.log($scope.newGroup);
        $modalInstance.close($scope.newGroup);
    }
    $scope.cancel = function (){
        $modalInstance.dismiss('Cancelled group creation');
    };

    $modalInstance.result.then(function (newGroup){
        groupService.createGroup(newGroup);
    }, function (reason){
        console.log(reason);
    }); 
}

createGroup服务功能：

var createGroup = function (newGroup) {
    var deferred = $q.defer();

    var currentUser = $().SPServices.SPGetCurrentUser({
        fieldName: "Name",
        debug: false
    });

    var promise = $().SPServices({
        operation: "AddGroup",
        groupName: newGroup.name,
        description: newGroup.desc,
        ownerIdentifier: currentUser,
        ownerType: "user",
        defaultUserLoginName: currentUser,
    })

    promise.then(function (){
        console.log('new group created');
        getGroups();
        deferred.resolve();
    },
    function(){
        console.log('failed to create new group');
        deferred.reject();
    });
    return deferred.promise;
}

问题：如何让主控制器运行函数AFTER，createGroup服务函数已经完成并返回它的承诺？

例如，一旦模态调用createGroup服务函数并且该函数更新了我的用户列表，我需要在主groupCtrl中设置这些元素：

        $scope.selectedGroup = false;
        $scope.groups = groupService.getGroups();