AngularJS: Is it possible to watch a global variable (I.e outside a scope)?


Let me start by saying that what I am trying to do is probably not considered good practice. However, I need to do something like this in order to migrate a large web app to AngularJs in small incremental steps.

I tried doing

 $scope.$watch(function () { return myVar; }, function (n, old) {
                    alert(n + ' ' + old);

Where myVar is a global variable (defined on window)

And then changing myVar from the console.
But it only fires when first setting up the watcher.

It works if I update myVar from within the controller (see, but not if it is updated from some legacy javascript

Is there any way to achieve this?

I like Anders’ answer if the legacy code is completely off limits. However, at the moment I am looking at this approach which seems to work and does not include a timer firing every second:

// In legacy code when changing stuff    
$('.angular-component').each(function () {

// In angular
$scope.$on('changed', function () {

I am awarding points to Anders even though I will go with another solution, since his solution correctly solves the problem stated.


The issue here is probably that you’re modifying myVar from outside of the Angular world. Angular doesn’t run digest cycles/dirty checks all the time, only when things happen in an application that should trigger a digest, such as DOM events that Angular knows about. So even if myVar has changed, Angular sees no reason to start a new digest cycle, since nothing has happened (at least that Angular knows about).

So in order to fire your watch, you need to force Angular to run a digest when you change myVar. But that would be a bit cumbersome, I think you would be better of to create a global observable object, something like this:

<!doctype html>
<html ng-app="myApp">
    <script src=""></script>
    <script src=""></script>
    // Outside of Angular
    window.myVar = {prop: "value1"};
    var myVarWatch = (function() {
        var watches = {};

        return {
            watch: function(callback) {
                var id = Math.random().toString();
                watches[id] = callback;

                // Return a function that removes the listener
                return function() {
                    watches[id] = null;
                    delete watches[id];
            trigger: function() {
                for (var k in watches) {

    setTimeout(function() {
        window.myVar.prop = "new value";
    }, 1000);

    // Inside of Angular
    angular.module('myApp', []).controller('Ctrl', function($scope) {
        var unbind = {
            console.log("the value changed!", newVal);

        // Unbind the listener when the scope is destroyed
        $scope.$on('$destroy', unbind);
<body ng-controller="Ctrl">


Answered By – Anders Ekdahl

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply

(*) Required, Your email will not be published