display or hide loading from multiple controllers - angularjs

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.