title: View is not updated on change in Angular2
body: <p>I've started exploring Angular2 (I'm coming with Angular1 and a bit of React background) and I got stuck with a problem.</p>
  
  <p>I want to bind certain keystrokes to actions in my component, so I've decided to use Angular2 lifecycle to bind/unbind actions.</p>
  
  <p>However, if I do something from within a Mousetrap callback, it works, but it's not rendered and a change is not visible until a digest cycle is run.</p>
  
  <p>Do I need to run something explicitly to update a view</p>
  
  <p>Could somebody help me to figure out what is going on?
  Any help would be very appreciated.</p>
  
  <hr>
  
  <pre><code>import {Component} from 'angular2/core';
  const Mousetrap = require('mousetrap');
  
  @Component({
    template: `&lt;div&gt;
      Video template: Mode {{ mode }}
      &lt;input type="number" [(ngModel)]="mode"/&gt;
    &lt;/div&gt;`
  })
  export class Video {
  
    public mode: number;
  
    constructor() {
      this.mode = 0;
    }
  
    ngOnInit() {
  
      console.log('hello Video component');
      Mousetrap.bind('d', () =&gt; console.log('this.mode=', this.mode));
      Mousetrap.bind('i', () =&gt; this.incrementMode()); // doesn't work
  
      this.incrementMode(); // works
      this.incrementMode(); // works
      setTimeout(() =&gt; this.incrementMode(), 4000); // works
  
    }
  
    incrementMode() {
      console.log('incMode', this.mode++);
    };
  
    ngOnDestroy() {
      console.log('bye bye Video component');
      Mousetrap.unbind(['d', 'i']);
    }
  
  }
  </code></pre>