title: Why is my http error response not being called when img ng-src is called?
body: <p>I have the following problem: I am trying to trap an HTTP 500 response from the server but the intercept is not getting the 500 response. This is generated by an img src call to an unauthorized URL (technically the server should be returning a 4xx, but it returns a 5xx --> its a 3rd party server. </p>
  
  <p><strong>Update 2:</strong> My intercept with HTTP rejection <em>is</em> called if I do a direct $http.get but it does not get called if the http get is implicitly called by img ng-src or img-src. The funny part is my httptimeout intercept is called, but the response intercept is never called. How do I solve this?</p>
  
  <p><strong>Update 1</strong>: I've added a screenshot of the 500 error that is being received by my browser via web inspector but not being intercepted. Please see the end. </p>
  
  <p>interceptor code:</p>
  
  <pre><code>  .factory('timeoutHttpIntercept', function ($rootScope, $q) {
              //console.log("*** HTTP INTERCEPTOR CALLED ***");
              return {
                  'request': function (config) {
                      config.timeout = 15000;
                      //console.log("*** HTTP INTERCEPTOR CALLED ***");
                      return config;
                  }
  
  
              };
          })
  
  .factory ('httpAuthIntercept', function ($rootScope, $q)
  {
      return {
      requestError: function (response) {
        console.log ("**** REJECT REQUEST: "+JSON.stringify(response));
        return $q.reject(response);
      },
  
      responseError: function (response) {
        console.log ("**** REJECT RESPONSE: "+JSON.stringify(response));
        return $q.reject(response);
      },
      response: function (response)
          {
              console.log("*******RESPONSE with status: "+response.status+"****************");
              if (response.status == 500)
              {
               console.log ("**** RESPONSE: "+JSON.stringify(response));
              }
                  return (response);
          }
    };
  })
  </code></pre>
  
  <p>Followed by, in .config:</p>
  
  <pre><code> $httpProvider.interceptors.push('timeoutHttpIntercept');
   $httpProvider.interceptors.push('httpAuthIntercept');
  </code></pre>
  
  <p>Now, in my template  I am calling the following code:</p>
  
  <p><code>&lt;img  ng-src="{{LoginData.url}}/cgi-bin/zms?mode=jpeg&amp;amp;monitor={{monitorId}}&amp;maxfps=3&amp;buffer=1000&amp;auth=1234&amp;rand={{rand}}" width="100%" /&gt;</code></p>
  
  <p>The above triggers a 500 response. I see the server logs generating this as well:</p>
  
  <pre><code>Starting capture on eth0 interface
  2015-05-11 05:12:44 xx.xx.xx.xx 192.168.1.13    &gt;   GET &lt;server.com&gt;    /cgi-bin/zms?mode=jpeg&amp;monitor=1&amp;maxfps=3&amp;buffer=1000&amp;auth=1234&amp;rand=116426 HTTP/1.1    -
  2015-05-11 05:12:44 192.168.1.13    xx.xx.xx.xx &lt;   -   -   -   HTTP/1.1    500 Internal Server Error
  </code></pre>
  
  <p>But for some reason, the auth intercept is not trapping this 500. If I remove the 500 check in auth intercept, I can see it trapping successful responses with 200 OK.</p>
  
  <p>What am I doing wrong?</p>
  
  <p>500 Response screenshot being received --> web inspector of Safari:</p>
  
  <p><img src="https://i.stack.imgur.com/OqKql.png" alt="500 error being received"></p>
  
  <p>Thanks</p>