title: Angular 2 custom directive doesn't update the model
body: <p>I'm using custom directive and it should set value attribute to the host.
  Issue is it doesn't update the model of the component and only updates the element value.</p>
  
  <p>Here is the live plnkr link: <a href="https://plnkr.co/edit/lcT4q9EP3OEnuIDcGobC?p=preview" rel="nofollow">https://plnkr.co/edit/lcT4q9EP3OEnuIDcGobC?p=preview</a></p>
  
  <pre><code>//our root app component
  import {Component} from 'angular2/core';
  import { Directive, ElementRef, OnInit, HostListener } from 'angular2/core';
  
  @Directive({selector: '[myData]'})
  
  class MyDataDirective implements OnInit {
    private el: any;
    constructor(el: ElementRef) {
      this.el = el.nativeElement
    }
  
    @HostListener('focus') onFocus() {
      console.log("focus event triggered...")
      this.el.setAttribute("value", "On Focus value") //Input value changes but model doesn't update
    }
  
    ngOnInit() {
      console.log("oninit function called...")
      this.el.setAttribute('value', 1234)
  
    }
  }
  
  
  @Component({
    selector: 'my-app',
    template: `
      &lt;input type="text" placeholder="Enter text" [(value)]="inputValue" myData/&gt;
    `;
    directives: [MyDataDirective]
  })
  
  export class App {
    constructor() {
      this.inputValue = "Value from model"
    }
  }
  </code></pre>