fix(input): listen on "change" for radio and checkbox

input[radio] and inout[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

Closes angular#4516
Closes angular#14667

BREAKING CHANGE:

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.

Two scenarios might need migration:

- Triggering click events:

Conventional trigger functions:

The change event might not be fired when the input element is not attached to the document. This
can happen in **tests** that compile input elements and
trigger click events on them. Depending on the browser and the trigger method, the change event
will not be fired when the input isn't attached to the document.

Before:

```js
    it('should update the model', inject(function($compile, $rootScope) {
      var inputElm = $compile('<input type="checkbox" ng-model="checkbox" />')($rootScope);

      inputElm[0].click(); // Or different trigger mechanisms, such as jQuery.trigger()
      expect($rootScope.checkbox).toBe(true);
    });
```

With this patch, `$rootScope.checkbox` might not be true, because the click event
hasn't triggered the change event. To make the test, work append the inputElm to the app's
$rootElement, and the $rootElement to the $document:

After:

```js
    it('should update the model', inject(function($compile, $rootScope, $rootElement, $document) {
      var inputElm = $compile('<input type="checkbox" ng-model="checkbox" />')($rootScope);

      $rootElement.append(inputElm);
      $document.append($rootElement);

      inputElm[0].click(); // Or different trigger mechanisms, such as jQuery.trigger()
      expect($rootScope.checkbox).toBe(true);
    });
```

triggerHandler():

If you are using this jQuery / jqLite function on the input elements, you have don't have to attach
the elements to the document, but instead change the triggered event to "change". This is because
`triggerHandler(event)` only triggers the exact event when it has been added by jQuery / jqLite.

- Custom click events:

Before this change, custom click handlers on radio / checkbox would be called after the
input element and `ngModel` had been updated, unless they were specifically registered before
the built-in click handlers.
After this change, they are called before the input is updated, and can call event.preventDefault() and
event.stopImmediatePropagation() to prevent the input from updating.
If an app relied on the model being updated when the custom click handler has been called, you should
register a "change" handler instead.

Author: Narretz

src/ng/directive/input.js

@@ -1816,7 +1816,7 @@ function radioInputType(scope, element, attr, ctrl) {
     }
   };
 
-  element.on('click', listener);
+  element.on('change', listener);
 
   ctrl.$render = function() {
     var value = attr.value;
@@ -1850,7 +1850,7 @@ function checkboxInputType(scope, element, attr, ctrl, $sniffer, $browser, $filt
     ctrl.$setViewValue(element[0].checked, ev && ev.type);
   };
 
-  element.on('click', listener);
+  element.on('change', listener);
 
   ctrl.$render = function() {
     element[0].checked = ctrl.$viewValue;

test/helpers/testabilityPatch.js

@@ -359,7 +359,7 @@ function generateInputCompilerHelper(helper) {
         };
       });
     });
-    inject(function($compile, $rootScope, $sniffer) {
+    inject(function($compile, $rootScope, $sniffer, $document, $rootElement) {
 
       helper.compileInput = function(inputHtml, mockValidity, scope) {
 
@@ -381,6 +381,9 @@ function generateInputCompilerHelper(helper) {
         // Compile the lot and return the input element
         $compile(helper.formElm)(scope);
 
+        $rootElement.append(helper.formElm);
+        jqLite($document[0].body).append($rootElement);
+
         spyOn(scope.form, '$addControl').and.callThrough();
         spyOn(scope.form, '$$renameControl').and.callThrough();
 

test/ng/directive/inputSpec.js

@@ -3962,7 +3962,7 @@ describe('input', function() {
 
   describe('radio', function() {
 
-    it('should update the model', function() {
+    they('should update the model on $prop event', ['click', 'change'], function(event) {
       var inputElm = helper.compileInput(
           '<input type="radio" ng-model="color" value="white" />' +
           '<input type="radio" ng-model="color" value="red" />' +
@@ -3978,7 +3978,8 @@ describe('input', function() {
       expect(inputElm[1].checked).toBe(true);
       expect(inputElm[2].checked).toBe(false);
 
-      browserTrigger(inputElm[2], 'click');
+      if (event === 'change') inputElm[2].checked = true;
+      browserTrigger(inputElm[2], event);
       expect($rootScope.color).toBe('blue');
     });
 
@@ -4080,6 +4081,23 @@ describe('input', function() {
     });
 
 
+    they('should update the model on $prop event', ['click', 'change'], function(event) {
+      var inputElm = helper.compileInput('<input type="checkbox" ng-model="checkbox" />');
+
+      expect(inputElm[0].checked).toBe(false);
+
+      $rootScope.$apply("checkbox = true");
+      expect(inputElm[0].checked).toBe(true);
+
+      $rootScope.$apply("checkbox = false");
+      expect(inputElm[0].checked).toBe(false);
+
+      if (event === 'change') inputElm[0].checked = true;
+      browserTrigger(inputElm[0], event);
+      expect($rootScope.checkbox).toBe(true);
+    });
+
+
     it('should format booleans', function() {
       var inputElm = helper.compileInput('<input type="checkbox" ng-model="name" />');