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

Question

I know that I can run:

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

But I can't figure out a way to watch over change of $state.$current.name in my application.

Answer 1

It's 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

This works:

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