title: AngularJS with global $http error handling
body: <p>I want to globally intercept certain <code>$http</code> error scenarios, preventing controllers from handling the errors themselves. I think an HTTP interceptor is what I need, but I'm not sure how to get my controllers from also handling the error.</p>
  
  <p>I have a controller like this:</p>
  
  <pre><code>function HomeController($location, $http) {
      activate();
  
      function activate() {
          $http.get('non-existent-location')
              .then(function activateOk(response) {
                  alert('Everything is ok');
              })
              .catch(function activateError(error) {
                  alert('An error happened');
              });
      }
  }
  </code></pre>
  
  <p>And a HTTP interceptor like this:</p>
  
  <pre><code>function HttpInterceptor($q, $location) {
      var service = {
          responseError: responseError
      };
  
      return service;
  
      function responseError(rejection) {
          if (rejection.status === 404) {
              $location.path('/error');
          }
          return $q.reject(rejection);
      }
  }
  </code></pre>
  
  <p>This works, in as much as the browser redirects to the '/error' path. But the promise catch in <code>HomeController</code> is <em>also</em> executing, and I don't want that.</p>
  
  <p>I know I could code <code>HomeController</code> such that it ignores a 404 error, but that's not maintainable. Say I modify <code>HttpInterceptor</code> to also handle 500 errors, I'd then have to modify <code>HomeController</code> again (as well as any other controllers that might have since been added that use <code>$http</code>). Is there a more elegant solution?</p>