Angular - impossible to watch if inside ng-switch-when

Question

I need to $ to watch a variable in an area, but it is never called. I found that this has something to do with ng-switch-when.

For example: http://jsfiddle.net/gGKGX/

angular.module("GuyModule",[]).controller("GuyController", function($scope) { $scope.something = "foo"; $scope.guy="This is guy"; $scope.$watch('guy', function(){ console.log("guy changed!"); } ); } ); <div ng-controller="GuyController" ng-app="GuyModule"> <div ng-switch="something"> <div ng-switch-when="foo"> <input ng-model="guy"/> </div> <div ng-switch-when="bar"> <button ng-click="something='bar'">Click me!</button> </div> </div> </div> 

I expect "the guy has changed!" to print, but it is not, when I remove the "ng-switch-when", it works. How can I handle this?

By the way, the same thing happens with ui-if (from the angularui project).

Answer 1

the guy falls within the scope of the switch as well as your controller.

As you can see in the picture, guy exists in both areas. When you edit it, you edit it as part of ng-switch and do not edit the one you are viewing

Another example is displaying a guy outside the switch: http://jsfiddle.net/TheSharpieOne/gGKGX/1/

To fix this : Add $parent to the guy that is on the switch ( $parent.guy ): http://jsfiddle.net/TheSharpieOne/gGKGX/2/