AngularJS ng-include partial not available in $http interceptor

Question

I'm trying to have an ajax loading gif show when ajax content is loading in my AngularJS app.

I've got everything working with the code below. My problem is that I have to copy and paste the #loadingWidget markup on all of my pages. I'd like to be able to just include a partial. I tried using ng-include , but it doesn't seem that the ng-included html page is loaded when the interceptor runs.

Is there any other way I can include this partial without having to copy and paste the same html markup into every page?

// Module for the rest of the pages
var myapp = angular.module('myapp ', []);

// Set some configs
myapp .config(function($httpProvider) {

    // This loads the ajax loading image when necessary
    var $http,
        interceptor = ['$q', '$injector', function ($q, $injector) {
            var error;

            function success(response) {
                // get $http via $injector because of circular dependency problem
                $http = $http || $injector.get('$http');
                if($http.pendingRequests.length < 1) {
                    $('#loadingWidget').hide();
                }
                return response;
            }

            function error(response) {
                // get $http via $injector because of circular dependency problem
                $http = $http || $injector.get('$http');
                if($http.pendingRequests.length < 1) {
                    $('#loadingWidget').hide();
                }
                return $q.reject(response);
            }

            return function (promise) {
                $('#loadingWidget').show();
                return promise.then(success, error);
            }
        }];

    $httpProvider.responseInterceptors.push(interceptor);
});

currently I have to include this in every page

<div class="modal" id="loadingWidget" style="position:absolute; top: 45%;" >
        <div class="modal-dialog">
            <div class="modal-content">
              <div class="modal-body">
                <div id="loadingWidget" class="row-fluid ui-corner-all" style="padding: 0 .7em;">
                    <div class="loadingContent">
                        <p>
                            <img alt="Content" src="images/ajax-loading.gif" /> Thinking
                        </p>
                    </div>
                </div>
              </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->

I'd like to be able to just add this in all my pages, but nothing happens when I add this

<ng-include src="loading.html" ></ng-include>

Answer 1

ng-include will do what you want, but you need to add extra quotes to the src - <ng-include src="'loading.html'" ></ng-include>

If that doesn't work, have a look at the Network tab in browser development tools to see if it is actually loading the page correctly or if you need to change the path. The path is relative to the main page.