title: How to update view after change in angular2 after google event listener fired?
body: <p>I am trying to update the view after an event listener is fired. However, the change is not detected and isn't update until another change is detected.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import {
    Component, View, bootstrap
  } from 'angular2/angular2';
  
  @Component({
    selector: 'app'
  })
  @View({
    template: '{{keyword}} &lt;input id="keyword" /&gt;&lt;br/&gt;&lt;span (click)="update()"&gt;{{click}}&lt;/span&gt;'
  })
  class App {
    keyword;
    autocomplete;
    click;
    
    constructor() {
      var _this = this;
      var input = (document.getElementById('keyword'));
      this.autocomplete = new google.maps.places.Autocomplete(input);
      google.maps.event.addListener(this.autocomplete, 'place_changed', function(){
        console.log('place change');
        _this.keyword = "updated text";
        _this.click = "not clicked";
      });
      this.keyword = "original text";
      this.click = "click me after selection is made to force change";
    }
    
    update() {
      console.log("click");
      this.click = "clicked";
    }
    
  }
  
  bootstrap(App);</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
    &lt;head&gt;
      &lt;link rel="stylesheet" href="style.css" /&gt;
      &lt;script data-require="jquery@2.1.4" data-semver="2.1.4" src="http://code.jquery.com/jquery-2.1.4.min.js"&gt;&lt;/script&gt;
      &lt;script src="https://jspm.io/system.js"&gt;&lt;/script&gt;
      &lt;script src="https://code.angularjs.org/2.0.0-alpha.30/angular2.dev.js"&gt;&lt;/script&gt;
      &lt;script src="https://maps.googleapis.com/maps/api/js??v=3.exp&amp;libraries=places"&gt;&lt;/script&gt;
    &lt;/head&gt;
  
    &lt;body&gt;
      &lt;app&gt;&lt;/app&gt;
      
      &lt;script&gt;
        System.import('main');
      &lt;/script&gt;
    &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>If you change the location in the input, the text to the left should change. It only is changed after another change is detected, for example clicking the text below.</p>
  
  <p>What am I doing wrong and how do I do it right?</p>