title: Change an input's ngModel value using a directive Angular 2
body: <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>