Example of CSS-based waiting indicator, an example

Example of CSS-based waiting indicator with Angular JS

In your HTML-file:
<div class="overlay" ng-class="{'ng-hide' : !isVisible }">
                <img ng-show="image"  ng-class="{'ng-hide' : !isVisible , 'myloading' : isVisible }" src="/images/loadingindicator.gif" alt="Spinner">
            </div>

CSS:
.myloading {
    opacity:0.5;
    background-color:#ccc;
    position:fixed;
    top:0px;
    left:0px;
    z-index:1000;
    border: 0px solid;
    margin: auto;
    right: 0;
    bottom: 0;
}

.overlay{
    opacity:0.8;
    background-color:#ccc;
    position:fixed;
    width:100%;
    height:100%;
    top:0px;
    left:0px;
    z-index:1000;
}

Use Broadcast/on concept in Angular to share data between Controllers, something like below:

$scope.$on('globalalertWaitMessages', function(event) {
           $scope.isVisible = true;
      });