$onChanges hook isn't working properly when using Promises

[smoglica]

I'm submitting a ...

• bug report
• feature request
• other

Current behavior:

Apparently $onChanges hook it's not called when bindings are updated through a resolved Promise or better it's called only when bound objects are assigned at least twice or when the HTML DOM undergoes a change or an update.

Expected / new behavior:

$onChanges should be triggered when the Promise got resolved.

Minimal reproduction of the problem with instructions:

Demo

I've created a JSFiddle (https://jsfiddle.net/nrLwzg79/6/) in order to reproduce the issue.

Premise

"Hover" button will add a class "red" on the element when the cursor is hover it. In this way DOM get changed.

Tests cases

1. Click once on Async button

$onChanges will be not fired even when the promise got resolved. By hovering with the cursor to the "Hover" button $onChanges hook get fired.

2. Click twice on Async button

$onChanges will be fired only on the second attempt and will display the first resolved promise. By hovering with the cursor to the "Hover" button will be fired the second resolved promise and so on...

3. Click thrice or more on Async button

You can notice that after the second attempt seems that $onChanges is always fired, but it left a promise behind, in fact after clicking multiple times on "Async" button and than hovering on "Hover" button $onChanges detects one more change.

AngularJS version: 1.6.9

Browser: all

Anything else:

This issue is not reproducible when the promise is coming form $resource and $http providers.

[petebacondarwin]

The problem you have found is that native Promises do not understand about the AngularJS digest cycle. You need to use the built-in AngularJS promise library $q.

Here is a working fiddle: https://jsfiddle.net/9869eh9c/2/