Modifying scope variables outside AngularJS controller

So, work involves a fair bit of AngualrJS from time and again and for the most part, I am lucky enough to work with pure AngularJS code, however there are times that I have to work with non-AngularJS code that is supposed to interact with AngularJS code. Please have a look at the example below to get a clearer picture of what scenario I am talking about. Now AngularJS is awesome, but it was not always around i.e. it was released recently compared to some other Javascript libraries. So at times, integrating it with an application that already has well-written javascript, can be a bit challenging. So you may think, why angular is being added to something that already has well-written javascript code? I do not know the exact answer to this, but if I were to guess, I suppose it would be to “leverage” some of the benefits that come from using angular. Let’s look at how to modify scope variables outside AngularJS controller.

Scenario

Say we have an input element in the container that we name TestCtrl, as follows ScopeTest is bound to the scope i.e. scope.scopeTest, in the controller TestCtrl.

Problem

Now say if the value of the input element testInput changes outside the controller.  With something like this The scope property will still be pointing to the same old value, so how do we change the value such that, the scope has the updated value as well?

Scope variables outside AngularJS controller

The solution is actually pretty straight forward, we make use of the awesome $apply method of the scope. So instead of the above approach we use the following function So as you can see we get the div that corresponds to the controller, we get its scope and then change the scopeTest property within the $apply function. The official documentation for scope can be very informative as well. Alternatively the entire source code for this post can be downloaded here.