title: AngularJS - rejected $http promise with $routeProvider:resolve
body: <p>I am trying to use <code>resolve</code> in a <code>$routeProvider</code> to display the new route only when a <code>$http</code> request is finished. If the request is successful, the promise resulting from the $http.post() is resolved and the view is rendered. But if the request fails (timeout or internal error for eg.), the promise is never resolved and the the view is never rendered. How can I deal with request failure using <code>resolve</code> ? </p>
  
  <p>The most important parts of the code is bellow :</p>
  
  <p>app.js</p>
  
  <pre><code>$routeProvider.when('/warrantyResult', {
      templateUrl : 'partials/warranty-result.html',
      controller : 'WarrantyResultCtrl',
      resolve : {
          response : [ 'Warranty', function(Warranty) {
              return Warranty.sendRequest();
          } ]
      }
  });
  </code></pre>
  
  <p>controllers.js</p>
  
  <pre><code>angular.module('adocDemo.controllers', []).controller('HomeCtrl', [ '$scope', function($scope) {
  
  } ]).controller('WarrantyCtrl', [ '$scope', '$http', '$location', 'Warranty', function($scope, $http, $location, Warranty) {
      $scope.submitWarranty = function() {
          $scope.loading = true;
          Warranty.setRequestData($scope.data);
          $location.path('/warrantyResult');
      };
  } ]).controller('WarrantyResultCtrl', [ '$scope', 'Warranty', function($scope, Warranty) {
  
      $scope.request = Warranty.getRequestData();
      $scope.response = Warranty.getResponseData();
  } ]);
  </code></pre>
  
  <p>services.js</p>
  
  <pre><code>angular.module('adocDemo.services', []).factory('Warranty', [ '$http', '$timeout', function($http, $timeout) {
      /**
       * This service is used to query the Warranty Webmethod. The sendRequest
       * method is automaticcaly called when the user is redirected to
       * /warrantyResult route.
       */
      var isDataSet = false;
      var requestData = undefined;
      var responseData = undefined;
      return {
          setRequestData : function(data) {
              //Setting the data
              isDataSet = true;
          },
          getRequestData : function() {
              return requestData;
          },
          sendRequest : function(data) {
              if(isDataSet) {
                  var request = $http.post('url/to/webservice', requestData);
                  request.success(function(data) {
                      responseData = data;
                  });
                  return request;
              }   
          },
          getResponseData : function() {
              return responseData;
          }
      };
  } ]);
  </code></pre>
  
  <p>I know i could use a promise around the $http call and resolve it even if the request is a failure, but I'm wondering if there is a simpler solution.</p>
  
  <p>Thanks for reading and, hopefully, helping :)</p>