title: Angular 2. Async function and binding
body: <p>I have problem with binding with async function in Angular 2.</p>
  
  <p>The problem is that VK (global variable) has API with async function, and I tryid to wrapper it in Observable. But when I click the very first time on Button, in view {{model?.count}} still is empty. And only after second click I see number from request. How to fix it?</p>
  
  <pre><code>import { Component } from '@angular/core';
  import {Observable} from 'rxjs/Observable';
  @Component({
      selector: 'my-app',
      template: `
          &lt;h1&gt;My First Angular App&lt;/h1&gt;
          &lt;button (click)="onClickMe()"&gt;Receive data&lt;/button&gt;
          &lt;span&gt;{{model?.count}}&lt;/span&gt;
          `
  })
  export class AppComponent {
      private data: Observable&lt;any&gt;;
      model: any;
  
      onClickMe() {
          this.data = new Observable(observer =&gt; {
              VK.api("friends.get", {user_id: 2888170}, data =&gt; observer.next(data.response));
          });
  
          let subscription = this.data.subscribe(
              model =&gt; this.model = model
          );
  
      }
  }
  </code></pre>