material-tab-panel does not update labels when material-tab label is changed. about angular_components HOT 5 OPEN

import 'package:angular2/angular2.dart';
import 'package:angular2_components/angular2_components.dart';

class Tab {
  String title;
  String text;
  Tab(this.title, this.text);
}

@Component(
    selector: 'my-app',
    styleUrls: const ['app_component.css'],
    templateUrl: 'app_component.html',
    directives: const [materialDirectives, NgFor],
    providers: const [materialProviders])
class AppComponent {
  List<Tab> tabs = new List<Tab>();
  AppComponent() {
    tabs.add(new Tab('one', 'Text in the first tab'));
    tabs.add(new Tab('two', 'Text in the second tab'));
    tabs.add(new Tab('three', 'Text in the third tab'));
  }
}

<h1>Testing Tabs</h1>
<material-tab-panel>
    <material-tab *ngFor="let tab of tabs" [label]="tab.title">
        <div>{{ tab.text }} </div>
    </material-tab>
</material-tab-panel>

<h1>Testing Tabs</h1>

<div *ngFor="let tab of tabs">
     <material-input
             label="Tab Title"
             floatingLabel="true"
             [(inputText)]="tab.title">
     </material-input>
    <material-input
            label="Tab Text"
            floatingLabel="true"
            [(inputText)]="tab.text">
    </material-input>
</div>

<material-tab-panel>
    <material-tab *ngFor="let tab of tabs" [label]="tab.title">
        <div>{{ tab.text }} </div>
    </material-tab>
</material-tab-panel>
<br/>
<br/>
<div *ngFor="let tab of tabs">{{tab.title}}</div>