UPDATE: I got answer on github. The bug will be fixed in Angular 2 beta 16.

This is a simple two-way data-binding for <select>.

Live demo using plnkr.

@Component({
  selector: 'my-app',
  template: `
    <select [(ngModel)]="product.partCode">
      <option *ngFor="#part of parts" [value]="part.code">{{part.name}}</option>
    </select>
    <select [(ngModel)]="product.levelCode">
      <option *ngFor="#level of levels" [value]="level.code">{{level.name}}</option>
    </select>
    {{product|json}}
  `
})
export class App {
  product = { partCode: 'aa', levelCode: 'lv1' };
  parts = [
    { code: 'aa', name: 'AA' },
    { code: 'bb', name: 'BB' }
  ];

  levels = [
    { code: 'lv1', name: 'Level 1' },
    { code: 'lv2', name: 'Level 2' }
  ];
}

When you select a new option, {{product|json}} can show it changes. This works well in Chrome, Safari, and Opera.

However when I use Firefox Developer Edition 47.0a2 and Firefox Nightly 48.0a1, {{product|json}} won't change. How can I let it work in Firefox too? Thanks

Or maybe it is a bug? Should I report to Angular 2 or Firefox?