$watch on rootscope not working, angular
angularjs, javascript
Solution
The real problem is that the `projectMode` in your view is not the same `projectMode` on the `$rootScope`. This is a common problem people have in Angular.
Scopes in Angular are prototypical. If a property isn't found in the current scope, then it looks for the property with the same name in that scope's parent, and so on until it reaches the `$rootScope`. So, when your view initializes, it may appear that `projectMode` is whatever you initialized it to on `$rootScope`.
However, as soon as you change the value of `projectMode`, it creates a new value on the controller's scope named `projectMode`, which is not the same as `$rootScope.projectMode`. So, it makes sense that your `$watch` isn't fired... The `$rootScope` value isn't changing, only the controller scope's value is changing.
If you'd like to fix it, simply change `projectMode` to `$root.projectMode` everywhere in your HTML. (`$root` inside HTML is how you reference `$rootScope`.)
Problem
I have a button which toggles admin and client mode. I've put it in on the rootscope so I can access it everywhere. I'm using the `angular-ui directive` for toggling. I've put a watch on this model. But nothing is happening. Any idea what can be wrong? ``` .run(['$rootScope', '$state', '$stateParams', '$location', function ($rootScope, $state, $stateParams, $location) { $rootScope.projectMode = 'Client'; $rootScope.$watch('projectMode', function(){ var path = $location.path(); alert("fire") //Only fire ones when the app starts if($rootScope.projectMode === 'Client'){ var current = 'client' var replace = 'admin' } else { var current = 'admin' var replace = 'client' } var newUrl = path.replace(current, replace) $location.url(newUrl); }) }]) ``` Here's my view. ``` <div class="btn-group"> <button type="button" class="btn btn-default" ng-model="projectMode" btn-radio="'Client'">Klient</button> <button type="button" class="btn btn-default" ng-model="projectMode" btn-radio="'Admin'">Admin</button> </div> ``` `btn-radio` is the angular-ui directive for toggling. I've checked that the `$rootScope.projectMode` is changing. So it must be something wrong with the `$watch`.