title: AngularJS handle rejected response with UI-Router
body: <p>I have a Service which wraps my API calls in Angular:</p>
  
  <pre><code>var ConcernService = {
  
      list: function (items_url) {
          var defer = $q.defer();
          $http({method: 'GET', 
              url: api_url + items_url})
              .success(function (data, status, headers, config) {
                  defer.resolve(data, status);
              })
              .error(function (data, status, headers, config) {
                  defer.reject(data, status);
              });
          return defer.promise;
      },
  </code></pre>
  
  <p>Then my app config, with <code>UI-Router</code>:</p>
  
  <pre><code>    .config(function($stateProvider){
  
          $stateProvider
  
          .state('default', {
              url: '/',
              resolve: {
                  tasks: function ($stateParams, ConcernService) {
                      return ConcernService.list('tasks/').then(
                          function (tasks)   { return tasks; },
                          function (reason)  { return []; }
                      );
                  },
                  ...
              }
          }
      });
  </code></pre>
  
  <p>This is the most basic configuration I could get away with, which basically just returns an empty object if a <code>403</code>, <code>404</code> etc is encountered and I can handle that in the view, template. </p>
  
  <p>My question is, what is the best approach for getting the other detail to the view/ template, such as the rejection <code>reason</code> and <code>status</code>. Should it be returned in the <code>tasks</code> object, or separately? </p>