title: Angular js not firing change event on an already checked checkbox
body: <p>Please check out this <a href="https://jsfiddle.net/ioesandeep/hvakbwhu/" rel="nofollow">fiddle here</a>. I am getting this weird behaviour from angular on change event on an initially checked chekbox. I checked this using jquery as well. The jquery event fires properly whilst the angular event fires only when the checked is initially unchecked.</p>
  
  <p>Here is my complete code btw:</p>
  
  <pre><code>&lt;html ng-app="testing"&gt;
  &lt;head&gt;
      &lt;title&gt;Angular ng-change test&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"&gt;&lt;/script&gt;
      &lt;script src="https://code.jquery.com/jquery-2.1.4.min.js"&gt;&lt;/script&gt;
      &lt;div class="row" ng-controller="ChgCtrl"&gt;
          &lt;div class="col-md-12"&gt;
              &lt;form&gt;
                  &lt;div class="form-group"&gt;
                      &lt;span class="text-info"&gt;ng-change&lt;/span&gt;
                      &lt;input type="checkbox" ng-model="formElem.checkbox" ng-change="toggleChange(formElem.checkbox)" ng-checked="formElem.checkbox == 1"/&gt;
                  &lt;/div&gt;
              &lt;/form&gt;
          &lt;/div&gt;
          &lt;div class="col-md-12"&gt;            
              &lt;div class="col-md-6"&gt;
                  &lt;h3&gt;JQuery change event:&lt;/h3&gt;
                  &lt;P id="jq-messages"&gt;&lt;/p&gt;
              &lt;/div&gt;        
              &lt;div class="col-md-6"&gt;                    
                  &lt;h3&gt;Angular change event:&lt;/h3&gt;
                  &lt;p&gt;{{message_change}}&lt;/p&gt;
              &lt;/div&gt;
              &lt;p class="text-danger"&gt;Please note the first click on checkbox.&lt;/p&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;script type="text/javascript"&gt;
          var app = angular.module('testing', []);
          app.controller('ChgCtrl', function ($scope) {
              $scope.formElem = {
                  checkbox: 1
              };
              $scope.message_change = '';
  
              $scope.toggleChange = function (data) {
                  $scope.message_change = data === true ? 'Checked' : 'Unchecked';
                  console.info(data === true ? 'Checked' : 'Unchecked');
              };
          });
  
          $(function () {
              $('input[type=checkbox]').on('change', function (e) {
                  $('#jq-messages').html($(this).is(':checked') ? 'Checked' : 'Unchecked');
                  console.log($(this).is(':checked'));
              });
          });
      &lt;/script&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p></p>