title: Multiselect checkbox in ng-grid column header does not work
body: <p>I try to implement a checkbox in the column header of a ng-grid.
  The purpose of that is to be able to check or uncheck all of the checkboxes in the given column.
  Since i want to have more than one of such a column in the future, i do not want to use the row selection checkbox feature by ng-grid.</p>
  
  <p>Now, if you run the plunkr code.. if you check and uncheck the checkboxes in the row/data section, everything seems to work fine, that means: If you select all checkboxes, the checkbox in the header will be checked as well.</p>
  
  <p>Once you have checked or unchecked the checkbox in the header by mouseclick, this does not work anymore.</p>
  
  <p>Steps to reproduce:</p>
  
  <ol>
  <li>Run the script on plunker</li>
  <li>Check every checkbox in the grid rows (NOT the one in the header row)</li>
  <li>You gonna see, that the header checkbox is gonna be checked automatically (that's what i want)</li>
  <li>Uncheck all checkboxes, by clicking the checkbox in the header</li>
  <li>Repeat step 2, the result will not be the same (as in step 3)</li>
  </ol>
  
  <p>Someone can explain me what's going on here? Maybe i am doing wrong, maybe it is a bug?</p>
  
  <p><a href="http://plnkr.co/edit/toM7Lrhs1otcjnpjrLGW" rel="nofollow">http://plnkr.co/edit/toM7Lrhs1otcjnpjrLGW</a></p>
  
  <pre><code>var app = angular.module('plunker', ['ngGrid']);
  
  app.controller('MainCtrl', function($scope) {
  
      $scope.gridData = [
          {
              "id": 0,
              "checker": false
          }, {
              "id": 1,
              "checker": true
          }, {
              "id": 2,
              "checker": true
          }
      ];
  
      $scope.columnDefs = [{
          field: 'checker',
          displayName: 'Checker',
          headerCellTemplate: "&lt;div class=\"ngHeaderSortColumn {{col.headerClass}}\" ng-style=\"{'cursor': col.cursor}\" ng-class=\"{ 'ngSorted': !noSortVisible }\"&gt; \
              &lt;div ng-click=\"col.sort($event)\" ng-class=\"'colt' + col.index\" class=\"ngHeaderText\"&gt; \
                  {{col.displayName}} \
                  &lt;input type=\"checkbox\" ng-model=\"checker\" ng-change=\"toggleCheckerAll(checker);\"&gt; \
              &lt;/div&gt; \
          &lt;/div&gt;",
          cellTemplate: "&lt;div class=\"ngCellText\" ng-class=\"col.colIndex()\"&gt; \
              &lt;input type=\"checkbox\" ng-input=\"COL_FIELD\" ng-model=\"COL_FIELD\" ng-change=\"toggleChecker(COL_FIELD)\"&gt; \
          &lt;/div&gt;"
      }];
  
      $scope.gridOptions = {
          data: 'gridData',
          enableCellSelection: false,
          enableRowSelection: false,
          columnDefs: 'columnDefs'
      };
  
      $scope.toggleCheckerAll = function(checked) {
          for (var i = 0; i &lt; $scope.gridData.length; i++) {
              $scope.gridData[i].checker = checked;
          }
      };
  
      $scope.toggleChecker = function(checked) {
          var rows = $scope.gridOptions.$gridScope.renderedRows,
              allChecked = true;
  
          for (var r = 0; r &lt; rows.length; r++) {
              if (rows[r].entity.checker !== true) {
                  allChecked = false;
                  break;
              }
          }
  
          $scope.gridOptions.$gridScope.checker = allChecked;
      };
  });
  </code></pre>