display or hide loading from multiple controllers

Question

I'm trying to create a generic loading that would be shared among controllers. So, I've created a service that will control the hide/show state:

(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);

}());

here's the loading controller:

(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'];
}());

the html:

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

</div>

and the directive:

(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);
}());

When I'm changing the LoadingService value, it's triggering the LOADING_CHANGED event. The problem is that ng-if is not working as expected, although the data variable is with the right value. What am I missing?

UPDATE

Changing to ng-show almost solve the problem. For a particular scenario is not working. I'm displaying the loading while trying to get the user position using html5 GeoLocation api, and setting a timeout after 10 seconds using.

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

this setTimeout function is being triggered, however the loading keeps being displayed.