title: How to catch http error response in Angular
body: <p><strong>Background</strong></p>
  
  <ul>
  <li>My Angular application communicates with a database through a set of API endpoints.</li>
  <li>"user/authenticate" endpoints accepts username and password and returns a success (200) or a bad request (400) http response.</li>
  </ul>
  
  <p><strong>Controller</strong></p>
  
  <pre><code>authService.login(email, password)
      .success(function (response) {
          /* go to application */
      })
      .error(function (response) {
          /* display proper error message */
      });
  </code></pre>
  
  <p><strong>auth Service</strong></p>
  
  <pre><code>factory.login = function(email, password) {
      return $http({
          method: 'POST',
          url: "http://myserver/user/authenticate",
          data: $.param({email: email, password: password}),
          headers: {'Content-Type': 'application/x-www-form-urlencoded'}
      });
  }
  </code></pre>
  
  <p><strong>Problem</strong></p>
  
  <p>When username and password fails and API returns 400 response, even though I'm catching the error and I'm displaying a proper message to user, the error appears in browser console.</p>
  
  <pre><code>POST http://myserver/user/authenticate 400 (Bad Request)
  </code></pre>
  
  <p>Can I handle errors in a better way?</p>