title: angular 2 two way binding fail on bootstrap 3 shown.bs.tab event
body: <p>angular 2/4 two way binding failed when changes happened in shown.bs.tab event (bootstrap 3 event).</p>
  
  <p>I am new to angular 2/4. Is it a bug?</p>
  
  <p><a href="http://plnkr.co/edit/jZJ64VhVB6yhAzVblJMk" rel="nofollow noreferrer">http://plnkr.co/edit/jZJ64VhVB6yhAzVblJMk</a></p>
  
  <pre><code>//our root app component
  import {Component, NgModule, VERSION, AfterViewInit} from '@angular/core'
  import {BrowserModule} from '@angular/platform-browser'
  
  @Component({
    selector: 'my-app',
    template: `
      &lt;div&gt;
        &lt;h2&gt;Hello {{name}}&lt;/h2&gt;
      &lt;/div&gt;
      &lt;ul class="nav nav-tabs"&gt;
              &lt;li role="presentation" class="active"&gt;
                  &lt;a class="chart-ind" role="tab" data-toggle="tab"&gt;h1&lt;/a&gt;&lt;/li&gt;
              &lt;li role="presentation"&gt;
                  &lt;a class="chart-ind" role="tab" data-toggle="tab"&gt;h2&lt;/a&gt;&lt;/li&gt;
              &lt;li role="presentation"&gt;
          &lt;/ul&gt;
      &lt;ul class="nav nav-tabs"&gt;
              &lt;li role="presentation" class="active"&gt;
                  &lt;a class="chart-ind1" role="tab" data-toggle="tab"&gt;h3&lt;/a&gt;&lt;/li&gt;
              &lt;li role="presentation"&gt;
                  &lt;a class="chart-ind1" role="tab" data-toggle="tab"&gt;h4&lt;/a&gt;&lt;/li&gt;
              &lt;li role="presentation"&gt;
          &lt;/ul&gt;
          &lt;p id="prevname"&gt;&lt;/p&gt;
          &lt;p id="aftername"&gt;&lt;/p&gt;
    `,
  })
  export class App {
    name:string;
    constructor() {
      this.name = `Angular! v${VERSION.full}`
    }
      ngAfterViewInit(){
          $('a.chart-ind').on('click', this.tabChange.bind(this));
          $('a.chart-ind1').on('shown.bs.tab',this.tabChange.bind(this));
      }
      tabChange(e) : void{
        $('#prevname').text(this.name);
        this.name = $(e.target).text();
        $('#aftername').text(this.name);
  
      }
  }
  
  @NgModule({
    imports: [ BrowserModule ],
    declarations: [ App ],
    bootstrap: [ App ]
  })
  export class AppModule {}
  </code></pre>
  
  <p>(All tabs share same callback, and h1,h2 use click, h3,h4 use shown.bs.tab)</p>