Angular 2 custom directive doesn't update the model
<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>