AngularJs watch window variable

Question

In angularJs is possible to watch a global variable?

I set a window.test variable from legacy code, then I need to watch that variable to know if it exists.

I've tried something like

$window.$watch("test" , function(n,o){
    //some code here...
}

Answer 1

Somewhat. You can if you include the Angular $window service (which is safer, as explained in the docs, than accessing window directly):

app.controller('myCtrl', function ($scope,$window) {...}

And then use a watch function as the first parameter to your $watch like so:

$scope.$watch(
    function () {
        return $window.test 
    }, function(n,o){
        console.log("changed ",n);
    }
);

demo fiddle

But note that the $watch won't execute until something triggers Angular to do a $digest. One possible way to do that is to wrap your legacy code in a $scope.$apply or trigger a $digest once the legacy code has exectuted. Here's some good documentation on this.

Basically whenever a change happens outside of angular (for instance this is a common issue when jQuery causes the change) something has to tell Angular to go see if something changed. It's one way Angular maintains reasonable performance.