app.controller('HttpIntegrationWithReferenceIdAndMatchersController', function($scope, $http, $sce, bsLoadingOverlayService) {
    $scope.randomText = $sce.trustAsHtml('Fetch result here');
    $scope.randomUser = undefined;

    $scope.fetchRandomText = function() {
        $http.get('http://hipsterjesus.com/api/')
            .success(function(data) {
                $scope.randomText = $sce.trustAsHtml(data.text);
            })
            .error(function() {
                $scope.randomText = $sce.trustAsHtml('Can not get the article');
            });
    };

    $scope.fetchRandomUser = function() {
        $http.get('https://randomuser.me/api/')
            .success(function(data) {
                $scope.randomUser = data.results[0];
            });
    };
});

        

<div ng-app="app-http-integration-with-reference-id-and-matchers">
  <div ng-controller="HttpIntegrationWithReferenceIdAndMatchersController">
    <style>
      .random-result {
              display: flex;
              height: 300px;
              margin-top: 1em;
          }
      
          .random-result__text, .random-result__user {
              position: relative;
              overflow: auto;
              border: 2px dashed #C00;
              flex: 1;
              margin: 1em;
              padding: 1em;
              text-align: center;
          }
      
          .user__photo {
              width: 150px;
              height: 150px;
              border-radius: 50%;
              margin: 20px;
          }
      
          .user__name {
              font-size: 2em;
              text-align: center;
          }
    </style>
    <div
    class="well well-lg bs-loading-container"
>
      <button ng-click="fetchRandomText()">Fetch random text</button>
      <button ng-click="fetchRandomUser()">Fetch random user</button>
      <div class="random-result">
        <div
            class="random-result__text"
            bs-loading-overlay
            bs-loading-overlay-reference-id="random-text-spinner"
            bs-loading-overlay-delay="3000"
        >
          <p ng-bind-html="randomText"></p>
        </div>
        <div
            class="random-result__user user"
            bs-loading-overlay
            bs-loading-overlay-reference-id="random-user-spinner"
            bs-loading-overlay-delay="3000"
        >
          <div ng-if="randomUser">
            <img ng-src="{{randomUser.picture.large}}" alt="" class="user__photo" />
            <p class="user__name">
              {{randomUser.name.first}} {{randomUser.name.last}}
                </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

        var app = angular.module('app-http-integration-with-reference-id-and-matchers', [
    'bsLoadingOverlay',
    'bsLoadingOverlayHttpInterceptor',
    'ui.bootstrap'
])
.factory('randomTextInterceptor', function(bsLoadingOverlayHttpInterceptorFactoryFactory) {
    return bsLoadingOverlayHttpInterceptorFactoryFactory({
        referenceId: 'random-text-spinner',
        requestsMatcher: function (requestConfig) {
            return requestConfig.url.indexOf('hipsterjesus') !== -1;
        }
    });
})
.factory('randomUserInterceptor', function(bsLoadingOverlayHttpInterceptorFactoryFactory) {
    return bsLoadingOverlayHttpInterceptorFactoryFactory({
        referenceId: 'random-user-spinner',
        requestsMatcher: function (requestConfig) {
            return requestConfig.url.indexOf('randomuser') !== -1;
        }
    });
})
.config(function($httpProvider) {
    $httpProvider.interceptors.push('randomTextInterceptor');
    $httpProvider.interceptors.push('randomUserInterceptor');
}).run(function(bsLoadingOverlayService) {
    bsLoadingOverlayService.setGlobalConfig({
        templateUrl: 'loading-overlay-template.html'
    });
});