In AngularJS, how do I add a $watch on the URL hash?

Question

Using Angular, how can I add a watch that is fired when the hash is updated, either by my application, or when the browser updates the URL from either the URL bar or the back/forward buttons?

Answer 1

$scope.$watch accepts function as the first argument, so you can do this:

$scope.$watch(function () {
    return location.hash
}, function (value) {
    // do stuff
});

But I would recommend using events, such as $routeChangeSuccess for default router:

$scope.$on("$routeChangeSuccess", function () {})

or $stateChangeSuccess for ui-router

$scope.$on("$stateChangeSuccess", function () {})

Answer 2

$locationChangeSuccess could be better.

$scope.$on('$locationChangeSuccess', function(event, newUrl, oldUrl){
    // TODO What you want on the event.
});