title: Handling error in ui-routers resolve function? (aka $stateChangeError) Passing data to error state?
body: <p>Inside my <code>Angular</code> application I handle routes/states via <code>ui-router</code>. If everything works - it is great. But what is a <em>good</em> way to handle errors occurring inside <code>resolve</code> functions?</p>
  
  <p>My current solution:
  I have a to dedicated <code>error</code> state (similar to the common <code>404.html</code>). Which looks like this:</p>
  
  <pre><code>// inside config()
  .state('error', {
    url: '/error',
    controller: 'ErrorCtrl',
    templateUrl: 'error.html' // displays an error message
  })
  </code></pre>
  
  <p>If an error occurs inside <code>resolve</code> I catch it via the broadcasted <code>$stateChangeError</code> in m <code>run</code> function:</p>
  
  <pre><code>angular.module('myModule').run(function($state) {
    $rootScope.$on('$stateChangeError', function(event, toState, toParams, fromState, fromParams, error) {
      event.preventDefault();
      $state.go('error');
    });
  });
  </code></pre>
  
  <p>This works, <strong>but</strong> I want to change my error message inside my <code>'error.html'</code> dependent on the error. I don't want to pollute the <code>$rootScope</code> and I want to do it in a <code>ui-router</code>'esk way.</p>
  
  <p>My current solution uses <code>$stateParams</code> to the error data to my <code>error</code> state, but I have to use JSONified query params for this and get a very ugly URL:</p>
  
  <pre><code>// inside config()
  .state('error', {
    url: '/error?data&amp;status&amp;config', // accept these three params
    controller: 'ErrorCtrl',
    templateUrl: 'error.html' // displays an error message
  })
  
  angular.module('myModule').run(function($state) {
    $rootScope.$on('$stateChangeError', function(event, toState, toParams, fromState, fromParams, error) {
      event.preventDefault();
      $state.go('error', JSON.stringify(error)); // error has data, status and config properties
    });
  });
  </code></pre>
  
  <p><strong>Question</strong>
  Is there a different way how I can pass the <code>error</code> object to my <code>error</code> state without uglifying my URL? (Note: My <code>error</code> object is complex and not just a simple string.)</p>