title: Angular2, view not updating after variable changes in settimeout
body: <p>I am trying to setup my first angular2 application as an experiment and am using the latest beta release.</p>
  
  <p>I am facing a weird issue where the variable i am using in my view is not being updated after setting a timeout.</p>
  
  <pre class="lang-ts prettyprint-override"><code>@Component({
      selector: "my-app",
      bindings: []
  })
  
  @View({
      templateUrl: "templates/main.component.html",
      styleUrls: ['styles/out/components/main.component.css']
  })
  
  export class MainComponent {
  
      public test2 = "initial text";
  
      constructor() {
          setTimeout(() =&gt; {
              this.test2 = "updated text"; 
          }, 500);
  
      }
  }
  </code></pre>
  
  <p>As you can see i have a variable named test2 and in the constructor i set a timeout of 500 ms where i am updating the value to "updated text".</p>
  
  <p>Then in my view main.component.html  i simply use:</p>
  
  <pre class="lang-html prettyprint-override"><code>{{ test2 }}
  </code></pre>
  
  <p>But the value will never be set to "updated text" and stays on "initial text" forever even though the update part is being hit. If i follow the angular2 tutorial they dont really give me an answer to this solution. Was wondering if anyone would have an idea of what i am missing here.</p>
  
  <p>edit: my full code i am using including the bootstrap and html etc</p>
  
  
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;Angular 2&lt;/title&gt;
      &lt;script src="/node_modules/systemjs/dist/system.src.js"&gt;&lt;/script&gt;
      &lt;script src="/node_modules/reflect-metadata/reflect.js"&gt;&lt;/script&gt;
      &lt;script src="/node_modules/angular2/bundles/angular2.dev.js"&gt;&lt;/script&gt;
  
      &lt;script src="/node_modules/q/q.js"&gt;&lt;/script&gt;
      &lt;script src="/node_modules/jquery/dist/jquery.js"&gt;&lt;/script&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
  
      &lt;script src="/bower_components/breeze-client/breeze.debug.js"&gt;&lt;/script&gt;
      &lt;script src="/bower_components/datajs/datajs.js"&gt;&lt;/script&gt;
      &lt;script src="/bower_components/bootstrap-less/js/collapse.js"&gt;&lt;/script&gt;
      &lt;script src="/bower_components/bootstrap-less/js/modal.js"&gt;&lt;/script&gt;
  
      &lt;script src="/bower_components/signalr/jquery.signalR.js"&gt;&lt;/script&gt;
      &lt;script src="http://localhost:64371/signalr/js"&gt;&lt;/script&gt;
  
      &lt;link href="styles/out/main.css" type="text/css" rel="stylesheet"  /&gt;
      &lt;script&gt;
          System.config({
              map: {
                  rxjs: '/node_modules/rxjs' // added this map section
              },
              packages: {'scripts/out': {defaultExtension: 'js'}, 'rxjs': {defaultExtension: 'js'}}
          });
  
          System.import('scripts/out/main');
  
      &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;my-app&gt;loading...&lt;/my-app&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>main.ts with the bootstrap: </p>
  
  <pre class="lang-ts prettyprint-override"><code>import {Component} from 'angular2/core';
  import {bootstrap} from 'angular2/platform/browser'
  import {COMMON_DIRECTIVES} from './constants';
  import {MainComponent} from './components/main.component'
  bootstrap(MainComponent);
  </code></pre>
  
  <p>main-component.html
  </p>
  
  <pre><code>{{ test2 }}
  </code></pre>