How to $ watch the state change of $ stateProvider in AngularJS?

Question

I know I can run:

scope.$watch(someItem, function(){}) 

But I cannot find a way to observe the change of $state.$current.name in my application.

Answer 1

In the docs: https://github.com/angular-ui/ui-router/wiki#state-change-events

 $rootScope.$on('$stateChangeStart', function(event, toState, toParams, fromState, fromParams){ // do something }) 

Answer 2

It works:

 $scope.$watch(function(){ return $state.$current.name }, function(newVal, oldVal){ //do something with values })