angularjs - How can I change my application state using ui-router from inside an interceptor? -

my config file looks this:

app.config(['$httpprovider', '$locationprovider', '$sceprovider', '$state', '$stateprovider', function (              $httpprovider,   $locationprovider,   $sceprovider,   $state, $stateprovider) {          $sceprovider.enabled(false);         $locationprovider.html5mode(true);         $httpprovider.interceptors.push(authinterceptor);          var authentication = {             name: 'authentication',             url: '/authentication',             views: {                 'root': {                     templateurl: function (stateparams) {                         return '/content/app/authentication/partials/home.html';                     }                 }              }         };          $stateprovider             .state(authentication)             .etc etc etc 

here's interceptor:

app.factory('authinterceptor', function ($q, $rootscope, $state) {      function success(response) {         return response;     }      function error(response) {          if (response.status === 401) {             $state.transitionto('authentication')             return $q.reject(response);         }         else {             return $q.reject(response);         }     }      return function (promise) {         return promise.then(success, error);     } }) 

the problem have when run application getting message saying:

uncaught error: [$injector:modulerr] failed instantiate module app due to: error: [$injector:unpr] unknown provider: $state 

can give me advice on how make state change if receive 401 ?

what if used event system , $rootscope?

for example, in interceptor:

$rootscope.$broadcast('authenticationfailed'); 

and in parent controller:

$rootscope.$on('authenticationfailed', function(event){     // authentication failed, transition or ever     $state.transitionto('authentication'); });