title: AngularJS HTTP Interceptor, Service & AngularStrap's Alert
body: <p>I wrote a factory for a NotificationService which will be called in my interceptors to detect for HTTP 4xx status codes and cause an alert to show up on the top of the screen.  The alerts use <a href="http://mgcrea.github.io/angular-strap/##alerts" rel="nofollow">AngularStrap's alert module</a>.</p>
  
  <p><strong>app.js</strong></p>
  
  <pre><code>var app = angular.module('app', [
    'app.filters',
    'app.services',
    'mgcrea.ngStrap.alert'
  ]);
  
  var Svc = angular.module('app.services', []);
  
  app.config(function($stateProvider, $urlRouterProvider, $httpProvider) {
    // Setup all states here…
    $stateProvider
       .state('home')
       .state('about')
       .state('blog');
    // Interceptor
    $httpProvider.interceptors.push("myInterceptor");
  });
  </code></pre>
  
  <p><strong>NotificationService.js</strong></p>
  
  <pre><code>Svc.factory('NotificationService', function($alert) {
    var obj = {};
  
    // default options for AngularStrap $alert
    var default_options = {
      placement: 'top',
      show: true,
      duration: 3,
      container: 'body'
    }
    obj.error = function(data) {
      angular.extend(default_options, data);  // Merge 'message' property of data into default options
      default_options.type = 'danger';
      $alert(default_options);    // This triggers the alert appearing in the view
    }
    return obj;
  });
  </code></pre>
  
  <p><strong>myInterceptor.js</strong></p>
  
  <pre><code>Svc.factory('myInterceptor', function($q, NotificationService) {
     return {
          responseError: function (response) {
              // Show an alert with the message property in response.data
              NotificationService.error(response.data);
  
              // do something on error
              return $q.reject(response);
          }
      };
  });
  </code></pre>
  
  <p>Something about my code is terribly wrong, but I'm not sure where.  Reading AngularStrap's documentation it mentions that <code>$alert</code> is exposed as a service which can be used in a controller/directive.  Does it matter if I use it in another factory?  Is it how I included the <code>mgcrea.ngStrap.alert</code> dependency (should it be in the app.services array instead)?</p>
  
  <p>I can't remember the exact error message (it's at work) but the error points to <a href="http://docs.angularjs.org/error/%24injector/unpr" rel="nofollow">this</a>.  What I could remember about the error is that it prints something like this:</p>
  
  <pre><code>$modalProvider &lt;- $alert &lt;- NotifcationService &lt;- &lt;blah blah blah&gt;
  </code></pre>
  
  <p>I hope this helps.</p>