title: Angular UI Bootstrap modal dialog in $http interceptor hangs the browser
body: <p>I'm trying to implement lazy authorization which will bring in the login dialog only when user triggers call to API requiring authentication. I'm using bootstrap <a href="https://github.com/angular-ui/bootstrap/tree/master/src/modal" rel="nofollow">ui.bootstrap.modal</a> (and <a href="https://github.com/angular-ui/bootstrap/tree/master/src/alert" rel="nofollow">ui.bootstrap.alert</a> within the modal). The problem is that these directives explicitly specify following <code>teamplateUrl</code>'s:</p>
  
  <ul>
  <li>template/modal/backdrop.html (in <code>modal.js</code> <a href="https://github.com/2ooom/bootstrap/blob/0.11.2/src/modal/modal.js#L64" rel="nofollow">here</a>)</li>
  <li>template/modal/window.html (in <code>modal.js</code> <a href="https://github.com/2ooom/bootstrap/blob/0.11.2/src/modal/modal.js#L87" rel="nofollow">here</a>)</li>
  <li>template/alert/alert.html (in <code>alert.js</code> <a href="https://github.com/2ooom/bootstrap/blob/0.11.2/src/alert/alert.js#L11" rel="nofollow">here</a>)</li>
  </ul>
  
  <p>like this:</p>
  
  <pre><code>.directive('modalBackdrop', ['$timeout', function ($timeout) {
    return {
      restrict: 'EA',
      replace: true,
      templateUrl: 'template/modal/backdrop.html',
      link: function (scope, element, attrs) {
        /* ... */
      }
    };
  }])
  </code></pre>
  
  <p>And every time I'm calling <code>$modal.open()</code> and ui-bootstrap builds DOM for new modal window, angular tries to resolve those urls via <code>$http</code> service even though the templates are already loaded either by <a href="https://docs.angularjs.org/api/ng/service/$templateCache" rel="nofollow"><code>$templateCache.put</code></a> method or by adding a <code>&lt;script&gt;</code> tag.
  This is basically causing infinite recursion in my interceptor which tries to bring in login dialog in <code>request</code> overload for the urls above.</p>
  
  <p>Here is simplified version of my interceptor:</p>
  
  <pre><code>.config(['$provide', '$httpProvider', function($provide, $httpProvider) {
      $provide.factory('testInterceptor', ['$injector', function($injector) {
          return {
          'request': function(config) {
  
              var auth = $injector.get('authService');
              var modal = $injector.get('$modal');
              if (!auth.LoggedIn) {
                var loginModal = modal.open({
                    template: 'Login screen &lt;alert type="warning"&gt;some message&lt;/alert&gt;',
                });
                return loginModal.result;
              }
              return config;
            }
  }}]);
  </code></pre>
  
  <p>Working demo is <a href="http://plnkr.co/edit/WnhW99dbP9c9PlQ9Yr2O" rel="nofollow"><strong>here</strong></a></p>
  
  <p>Can anyone advise the approach which will not involve hard-coding of the templateUrls used in <code>ui.bootstrap.modal</code> and <code>ui.bootstrap.alert</code>?</p>
  
  <p>I've also reported this as an <a href="https://github.com/angular-ui/bootstrap/issues/2926" rel="nofollow">issue</a>  on github.</p>