<div class="container" ng-app="myApp">
  <div ng-controller="AppController">
    <div class="well loading" ng-show="someService.loading.length > 0">
      <div class="spinner-loader"></div>
      Loading
    </div>
    <div class="main-content row">
      <div class="col-md-3">
        <a class="btn btn-default" href="#" role="button" ng-click="someService.loadSomething(2)">Delay 2</a>
      </div>
      <div class="col-md-3">
        <a class="btn btn-default" href="#" role="button" ng-click="someService.loadSomething(3)">Delay 3</a>
      </div>
      <div class="col-md-3">
        <a class="btn btn-default" href="#" role="button" ng-click="someService.loadSomething(5)">Delay 5</a>
      </div>
      <div class="col-md-3">
        <a class="btn btn-default" href="#" role="button" ng-click="someService.loadSomething(6)">Delay 6</a>
      </div>
    </div>
  </div>
</div>

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css');
@import url('http://css-spinners.com/css/spinner/spinner.css');
body, html{ margin: 0; }
.loading{ width: 100%; border-bottom: 1px solid #cecece; text-align: center; color: #000; padding: 15px; background-color: #F5F8FA;}
.spinner-loader{ vertical-align: middle; margin-right: 10px }

.main-content{ padding-top: 15px; }

var app = angular.module('myApp', []);

app.factory('someService', function($http){
    var obj = {
      loading: []
    };
    obj.setLoading = function(varProm){
      obj.loading.push(varProm)
    }
    
    obj.loadSomething = function(delay){
      var req = $http.get('http://reqr.es/api/users?delay=' + delay).
      success(function(data){
        obj.loading.pop()
        console.log(obj.loading)
      })
      obj.setLoading(req)
      console.log(obj.loading)
    }
    
    return obj;
})

function AppController($scope, $http, someService) {
  $scope.someService = someService;
}