AngularJS with global $http error handling
<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>