Checkbox [ngModel] does not reflect model value when updated in (onModelChange)

I’m submitting a … (check one with “x”)

[x] bug report
[ ] feature request
[ ] support request

Current behavior <input type="checkbox" [ngModel]="foo" (ngModelChange)="onChanges()" /> Behaves exactly like: <input type="checkbox" (onChanges)="onChanges()" />

The checkbox only reflects the model value when it is first rendered, but then becomes functionally equivalent to a checkbox without a binding. Manually detecting changes or using setTimeout inside (ngModelChange) does not work around this issue. The same workarounds do work when used with (click), but voids the use of [ngModel].

Expected behavior The logic in onChanges should run, and the view should then be updated to reflect the model’s current value.

Minimal reproduction of the problem with instructions http://plnkr.co/edit/g9niPnLsUy6wWbzm0mHi?p=preview

What is the motivation / use case for changing the behavior? [ngModel] should always reflect the model value.

Please tell us about your environment: Mac OS X Sierra, IntelliJ IDEA

• Angular version: 2.2.0

• Browser: all

• Language: [all | TypeScript X.X | ES6/7 | ES5] TypeScript 2.0.2

[trotyl]

@pcroc Issue confirmed, but it’s totally unrelated to checkbox, can be easily reproduced in input[type=text]:

https://stackblitz.com/edit/angular-pnpphi?file=src%2Fapp%2Fapp.component.ts

The problem is due to changing back to previous value, say:

• Current value is "Angular";
• After hitting backspace it become "Angula";
• Handler manually changes it to "Angular";
• Change detection find both previous and current input value being "Angular";
• ngOnChanges not triggered due to no change;
• The view value not being updated and become out of sync;

It’s more likely to happen in checkbox because there’re only two values available.

[pcroc]

This is possibly a duplicate of #9275.