Difference in order that ng-click and ng-change are fired between Angular 1.2 and Angular 1.6

Question

Something happened between AngularJS 1.2 and 1.6 to reverse the order that ng-click and ng-change fire in.

I've made a plunk to illustrate it: http://plnkr.co/edit/XgbgLSuP1znhWszeyiHd?p=preview

The default for this page is to use Angular 1.2.28. In this case, if you change the radio buttons in the example, you'll see the click event fires before the change event.

If you then switch the comments so that Angular 1.6.10 is used, you'll see the change event now fires before the click event.

What happened in the development of AngularJS to cause this, and is there any way to retain the former behaviour while using a more up to date version of AngularJS?

Thanks very much for any help you can give!

EDIT: I should probably say why this is important. I want to be able to inspect the value of the variable before it changes, in order to see whether the change should be allowed. I was able to do this using ng-click on AngularJS 1.2, but because ng-change is fired first on AngularJS 1.6, the change has already been made before I can decide whether it should go ahead. If you have other ideas as to how I can accomplish this with AngularJS 1.6, I'd be very interested to hear them.

Calvillo

Perhaps the issue is related to the priority order of these directives. They both should have priority: 0, so one is calling before another just because of how they were structured in code. – Fishmonger

The code could use ng-disabled to disable disallowed choices. – Remission

With AngularJS version 1.7, it behaves the same way as V1.2. The click handler executes first. – Remission

Answer 1

Here is the summary of the behavior of different versions:

 AngularJS V1.2   CLICK handler fires first    
 AngularJS V1.3   CHANGE handler fires first
 AngularJS V1.4   CHANGE handler fires first
 AngularJS V1.5   CHANGE handler fires first
 AngularJS V1.6   CHANGE handler fires first
 AngularJS V1.7   CLICK handler fires first

Code that depends on the order of events on an element lacks robustness. Write only robust code. Avoid fragile code that depends on unguaranteed features of a library or browser.

Use the ng-disabled directive on radio buttons to prevent choices.

---

From the Docs:

input[radio] and input[checkbox]

Due to 656c8f, input[radio] and input[checkbox] now listen to the "change" event instead of the "click" event. Most apps should not be affected, as "change" is automatically fired by browsers after "click" happens.

— AngularJS Developer Guide - Migrating to V1.7

ALSO

fix(input): listen on "change" instead of "click" for radio/checkbox …

…ngModels

input[radio] and input[checkbox] now listen on the change event instead of the click event. This fixes issue with 3rd party libraries that trigger a change event on inputs, e.g. Bootstrap 3 custom checkbox / radio button toggles.

It also makes it easier to prevent specific events that can cause a checkbox / radio to change, e.g. click events. Previously, this was difficult because the custom click handler had to be registered before the input directive's click handler.

It is possible that radio and checkbox listened to click because IE8 has broken support for listening on change, see http://www.quirksmode.org/dom/events/change.html

— Github commit #656c8f

Remission