Angular2 ngModel not updated after async callback
<p>Why angular2 two way data binding doesn' t work in this scenario ?</p>

<pre><code>&lt;span style="color:white"&gt;{{searchLocation}}&lt;/span&gt;
&lt;input  name="searchLocation" type="text" placeholder="Search" [(ngModel)]="searchLocation"&gt;
&lt;button class="btn btn-outline-success" type="submit" (click)="search()"&gt;Search&lt;/button&gt;
</code></pre>

<p>The target component is HeaderComponent</p>

<pre><code>export class HeaderComponent implements OnInit {

  searchLocation: string;
  @Output() locationFound: EventEmitter&lt;Position&gt; = new EventEmitter&lt;Position&gt;();

  constructor(private _locationService: LocationService) { }

  ngOnInit() {
     this.searchLocation ="";
  }

  search():void{

    this._locationService.geocodeAddress(this.searchLocation)
        .subscribe((position:Position)=&gt;{
          this.searchLocation ="new value";
          this.locationFound.emit(position);
    });
  }
}
</code></pre>

<p>After the subscribe block the searchLocation change but the view is not updated. </p>

<p>I hope somebody can help me </p>