显示或隐藏多个控制器的加载

Question

我正在尝试创建一个可在控制器之间共享的通用加载。所以，我已经创建了一个控制隐藏/显示状态的服务：

(function () {
    'use strict';

    var module = angular.module('main');
    var serviceId = "LoadingService";
    var ShowLoading = false;

    function LoadingService($rootScope) {

        function showLoading(value) {
            $rootScope.$broadcast(LOADING_CHANGED, value);
        }

        var service = {
            ShowLoading: showLoading
        }

        return service;
    }

    LoadingService.$inject = ['$rootScope'];
    module.service(serviceId, LoadingService);

}());

这是加载控制器：

(function () {
    'use strict';

    var app = angular.module("main");
    var controllerId = "rbLoading.controller";

    function loadingController($scope, LoadingService) {

        $scope.isLoading = false;

        $scope.$on(LOADING_CHANGED, function (event, data) {
            $scope.isLoading = data;
        });
    }

    app.controller(controllerId, loadingController);

    loadingController.$inject = ['$scope', 'LoadingService'];
}());

html：

<div class="loading-panel" ng-if="isLoading">
    <!-- loading content-->

</div>

和指令：

(function () {
    'use strict';
    var loadingDirective = function (OPTIMISATION) {
        return {
            restrict: 'E',
            templateUrl: function (element, attr) {
                return 'App/components/shared/loading/loading.html';
            },
            controller: 'rbLoading.controller',
            controllerAs: 'loading'
        };
    }
    var app = angular.module('main');
    loadingDirective.$inject = ["OPTIMISATION"];
    app.directive('rbLoading', loadingDirective);
}());

当我更改LoadingService值时，它会触发LOADING_CHANGED事件。问题是ng-if没有按预期工作，尽管数据变量具有正确的值。我错过了什么？

更新

更改为ng-show几乎可以解决问题。对于特定情况不起作用。我在尝试使用html5 GeoLocation api获取用户位置时显示加载，并在使用10秒后设置超时。

setTimeout(function () {
                    console.log("timeout");
                    LoadingService.ShowLoading(false);
                    }, 10000);

正在触发此setTimeout函数，但仍会显示加载。