Change an input's ngModel value using a directive Angular 2
<p>I'm stuck on how to access and change an inputs <code>ngModel</code> value using a directive. The outcome of the issue is that the model's address value doesn't update when I select the desired address...it's just set to what I actually typed into the input, rather than final value of the input.</p>

<p><strong>I type '830':</strong></p>

<p><a href="https://i.stack.imgur.com/yZSJf.png" rel="noreferrer"><img src="https://i.stack.imgur.com/yZSJf.png" alt="enter image description here"></a></p>

<p><strong>I select '8300 Fauntleroy Way Southwest, Seattle, WA, United States':</strong></p>

<p><a href="https://i.stack.imgur.com/kqDXr.png" rel="noreferrer"><img src="https://i.stack.imgur.com/kqDXr.png" alt="enter image description here"></a></p>

<p><strong>Resulting value:</strong></p>

<pre><code>{
  address: '830'
}
</code></pre>

<p><strong>Desired value:</strong> </p>

<pre><code>{
  address: '8300 Fauntleroy Way Southwest, Seattle, WA, United States'
}
</code></pre>

<p>In AngularJS I could do this:</p>

<pre><code>(function() {
  'use strict';

  angular
  .module('casemanagerApp')
  .directive('googleplace', googleplace);

  function googleplace() {

    var directive = {
      require: 'ngModel',
      link: link
    };

    return directive;

    function link(scope, element, attrs, model) {
      var options = {
        types: [],
        componentRestrictions: {}
      };
      scope.gPlace = new google.maps.places.Autocomplete(element[0], options); // jshint ignore:line

      google.maps.event.addListener(scope.gPlace, 'place_changed', function() { // jshint ignore:line
        scope.$apply(function() {
          model.$setViewValue(element.val());
        });
      });
    }
  }

})();
</code></pre>

<p>But now that I'm trying to convert it Angular 2, I'm a little stuck. Here's what I have so far on the conversion: </p>

<pre><code>/// &lt;reference path="../../../../typings/browser/ambient/googlemaps/index.d.ts"/&gt;

import { Directive, ElementRef, OnInit } from '@angular/core';

@Directive({
  selector: '[google-places]'
})
export class GooglePlaces implements OnInit {

  constructor(private _el: ElementRef) { }

  ngOnInit() {
    let gPlace = new google.maps.places.Autocomplete(this._el.nativeElement);
    google.maps.event.addListener(gPlace, 'place_changed', () =&gt; console.log(this._el.nativeElement));
  }

}
</code></pre>

<p>Usage:</p>

<pre><code>&lt;input type="text"
       ngControl="address"
       placeholder="Enter a location"
       [(ngModel)]="subject.address"
       #address="ngForm"
       google-places
       required&gt;
</code></pre>

<p>The heart of the issue is I don't understand how to do the equivalent of <code>model.$setViewValue(element.val());</code> in Angular 2. </p>

<p>Any assistance would be greatly appreciated.</p>

<p><strong><a href="https://plnkr.co/edit/1xMjzo" rel="noreferrer">Plunker</a></strong></p>