Modifying scope variables outside it's 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? To be honest, 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.

Scenario

Say we have an input element in the container that we name TestCtrl, as follows

<div id="TestCtrl" ng-controller="TestCtrl>
    <input type="text" id="testInput" value="{{scopeTest}}" />
</div>

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

function nonControllerFunction(){
   var valElem = document.getElementById("testInput");
   valElem.value = "value changed"
}

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?

Solution

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 

function changeValue(){
    var elem = document.getElementById("TestCtrl");
    var valElem = document.getElementById("testInput");
    var scope = angular.element(elem).scope();
    scope.$apply(function(){
       scope.scopeTest = 'Value changed';
    });
}

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.

References

The answer to this SO question was indeed very helpful.

The official documentation for scope can be very informative as well.

Alternatively the entire source code for this post can be downloaded here