title: Angular 2 How to get Angular to detect changes made outside Angular?
body: <p>I am trying to create a simple example project to test the angular 2 change detection mechanism: I create a pure javascript object in script tags on the main index page. it contains the following:</p>
  
  <pre><code>        var Tryout = {};
          Tryout.text = "Original text here";
          Tryout.printme = function(){
              console.log(Tryout.text);
          }
          Tryout.changeme = function(){
              Tryout.text = "Change was made";
          }
  </code></pre>
  
  <p>One function to console log it, and one to change the text property.</p>
  
  <p>Now in Angular 2 the code looks like this:</p>
  
  <pre><code>import {Component} from "angular2/core"
  
  @Component({
      selector: 'my-app',
      template: `
          &lt;h1&gt;{{TryoutRef.text}}&lt;/h1&gt;
          &lt;input type="text" [(ngModel)]="TryoutRef.text"&gt;
          &lt;button (click)="consoleLogMe()"&gt;Console Log&lt;/button&gt;
          &lt;button (click)="changeMe()"&gt;Change me inside&lt;/button&gt;
      `
  })
  
  export class MyApp{
  
      TryoutRef:any = Tryout;
      constructor(){
      }
      changeMe(){
          this.TryoutRef.changeme();
      }
      consoleLogMe(){
          console.log(this.TryoutRef.text);
      }
  
  }
  declare var Tryout:string;
  </code></pre>
  
  <p>What I am trying to do is this:
  When I call the function Tryout.printme() normally with onclick (Completely outside of angular) I want angular to detect the change and update the screen.</p>
  
  <p>I succeeded to this point: When I call Tryout.printme() from the component (the changeme() function is calling Tryout.printme()), Angular detects the change and updates the UI which is fine. Also, when I change from outside angular and I call consoleLogMe() from Angular it is logging the changed text and updates the UI. </p>
  
  <p>I guess I need to execute Tryout.changeme() in the same Zone that Angular is running in somehow. Any ideas? I have a big project which is done in pure javascript/jquery, and now I slowly need to rewrite the handlebar templates to angular2 components without touching the model (yet). For that I need to force the model to execute in the same zone as angular.</p>
  
  <p><em>If I wanted to do something like this in Angular 1 I would just $scope.$apply it would work.</em></p>
  
  <p><strong>Here is a gif from the example:</strong></p>
  
  <p><a href="https://i.stack.imgur.com/tnVtX.gif" rel="noreferrer"><img src="https://i.stack.imgur.com/tnVtX.gif" alt="enter image description here"></a></p>