Показать или скрыть загрузку с нескольких контроллеров

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 не работает должным образом, хотя переменная данных имеет правильное значение. Что мне не хватает?

ОБНОВИТЬ

Переход на нг-шоу практически решит проблему. По конкретному сценарию не работает. Я отображаю загрузку, пытаясь определить положение пользователя, используя html5 GeoLocation api, и задаю время ожидания через 10 секунд, используя.

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

эта функция setTimeout запускается, однако загрузка продолжает отображаться.