Angular Interop Example - How update the model and refresh the view from legacy outside code by calling $apply()

[Johno Scott]

I spent a day understanding this so thought I would share :

Am I doing the right thing here ?

Q. How do you update your Angular model from outside code ?

A. If you know the DOM element that contains your Angular model's scope you can call a controller method via $apply() which will refresh the view automatically :

    // get Angular scope from the known DOM element
    e = document.getElementById('myAngularApp');
    scope = angular.element(e).scope();
    // update the model with a wrap in $apply(fn) which will refresh the view for us
    scope.$apply(function() {
        scope.controllerMethod(val);
    }); 

Example: This example shows how an interval timer can send repeated updates to the Model by getting the scope and then calling my controllers MainCtrl.setTicks() method from within scope.$apply()

http://jsfiddle.net/johnoscott/dgW73/2/ 

References :

• http://docs.angularjs.org/guide/scope 
  
• http://docs.angularjs.org/api/ng.$rootScope.Scope#$apply 
  
• http://stackoverflow.com/questions/10490570/call-angular-js-from-legacy-code 
  
• http://stackoverflow.com/questions/10514147/in-angularjs-how-do-you-find-all-the-scopes-on-a-page/10557365#10557365 
  

[j...@fotobabble.com]

Thanks very much for the scope.$apply example!  It's exactly what I needed after confirming a jquery modal dialog I changed the model, but it was not updating the view instantly.  Wrapping it in the $apply allowed it to change instantly.