异步调用后更新指令范围

Question

我有一个用于模拟加载窗格的指令：

    var loadingModule = angular.module('loading', []);
    loadingModule.constant('MODULE_VERSION', '1.0.0');

    loadingModule.factory('LoadingAPI', function () {
        return {
            loading: null,
            success: null,
            error: null,
            errorMessage: null,
            working: null,
            countdown: null,
            redirecturl: null,

        displayError: function (errorString) {
            if (errorString != null && errorString.length > 0) {
                this.errorMessage = errorString;
            }
            else {
                this.errorMessage = "An error occured, please contact your system administrator";
            }
            this.working = true;
            this.loading = false;
            this.error = true;
            this.success = false;
        },

        hideLoading: function () {
            this.loading = false;
            this.success = false;
            this.error = false;
        },

        displayLoading: function () {
            this.working = true;
            this.loading = true;
            this.error = false;
            this.success = false;
        },

        displaySuccessAndRedirect: function (successString, redirectUrl, seconds) {
            this.successMessage = successString;
            this.working = true;
            this.loading = false;
            this.error = false;
            this.success = true;
            this.countdown = seconds;            
            //setTimeout(function () {
            //    window.location = redirectUrl;
            //}, seconds*1000);
        }
    }
});

    loadingModule.directive("loadingpane", function () {
        return {
            restrict: 'E',
            scope: {},
            replace: true,
            controller: function ($scope, LoadingAPI) {
                $scope.api = LoadingAPI;
            },
            template: '<div>' +                 
                      ' <div id="loadingcontainer" ng-show="api.working">' +
                      '     <div id="loadingbackground">' +
                      '     </div>' +
                      '     <div class="loadingmessages">' +
                      '         <div class="loadingbox" ng-show="api.loading">' +
                      '             <img src="/_layouts/images/ajax-loader.gif" />' +
                      '             <br />' +
                      '             Loading' +
                      '         </div>' +
                      '         <div class="errorloadingbox" ng-show="api.error">' +
                      '             {{api.errorMessage}}' +
                      '         </div>' +
                      '         <div class="successbox" ng-show="api.success">' +
                      '             <div class="successmessage">' +
                      '                 {{ api.successMessage }}' +
                      '             </div>' +
                      '             <div class="successredirect">' +
                      '                 You will be redirected in {{ api.countdown }} seconds' +
                      '             </div>' +
                      '         </div>' +
                      '     </div>' +
                      ' </div>' +
                      '</div>'
        }
    });

这很好用。但现在我想使用外部js库进行异步调用。问题是，如果我在回调中使用API​​，则指令的范围不会更新：

// the following code is executed after a click on a buttion, this Method use a 3rd party library which does async call and then call the callback function
// in the callback, my directive is not update. Outside the callback it's working properly
    informationModelService.createItem({
                            async: true,
                            list: Requests',
                            attrs: metadata,
                            callback: function (error) {
                                LoadingAPI.displaySuccessAndRedirect("Your request is successfully created!", listUrl, 3);
                            }
                        });