title: How to handle error in angular-ui-router's resolve
body: <p>I am using angular-ui-router's <code>resolve</code> to get data from server before moving to a state. Sometimes the request to the server fails and I need to inform the user about the failure. If I call the server from the controller, I can put <code>then</code> and call my notification service in it in case the call fails. I put the call to the server in <code>resolve</code> because I want descendant states to wait for the result from the server before they start.</p>
  
  <p>Where can I catch the error in case the call to the server fails? (I have read the <a href="https://github.com/angular-ui/ui-router/wiki#resolve">documentation</a> but still unsure how. Also, I'm looking for a reason to try out this new snippet tool :).</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>"use strict";
  
  angular.module('MyApp', ["ui.router"]).config([
    "$stateProvider",
    "$urlRouterProvider",
    function ($stateProvider, $urlRouterProvider) {
      $urlRouterProvider.otherwise("/item");
      $stateProvider
      .state("list", {
        url: "/item",
        template: '&lt;div&gt;{{listvm}}&lt;/div&gt;' +
         '&lt;a ui-sref="list.detail({id:8})"&gt;go to child state and trigger resolve&lt;/a&gt;' +
          '&lt;ui-view /&gt;',
        controller: ["$scope", "$state", function($scope, $state){
            $scope.listvm = { state: $state.current.name };
        }]
      })
      .state("list.detail", {
        url: "/{id}",
        template: '&lt;div&gt;{{detailvm}}&lt;/div&gt;',
        resolve: {
          data: ["$q", "$timeout", function ($q, $timeout) {
            var deferred = $q.defer();
            $timeout(function () {
              //deferred.resolve("successful");
              deferred.reject("fail");   // resolve fails here
            }, 2000);
            return deferred.promise;
          }]
        },
        controller: ["$scope", "data", "$state", function ($scope, data, $state) {
          $scope.detailvm = {
            state: $state.current.name,
            data: data
          };
        }]
      });
    }
  ]);</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"&gt;&lt;/script&gt;
  &lt;script src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.10/angular-ui-router.min.js"&gt;&lt;/script&gt;
  
  &lt;div ng-app="MyApp"&gt;
    &lt;ui-view /&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>