UI grid selection row header with checkbox

<!DOCTYPE html>
<html ng-app="app">

  <head>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-touch.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-animate.js"></script>
    <script src="http://ui-grid.info/docs/grunt-scripts/csv.js"></script>
    <script src="http://ui-grid.info/docs/grunt-scripts/pdfmake.js"></script>
    <script src="http://ui-grid.info/docs/grunt-scripts/vfs_fonts.js"></script>
    <script src="http://ui-grid.info/release/ui-grid.js"></script>
    <link rel="stylesheet" href="http://ui-grid.info/release/ui-grid.css" type="text/css" />
    <link rel="stylesheet" href="style.css" type="text/css" />
  </head>

  <body ng-controller="MainCtrl">
    <div>
      <br />
      <br />
      <div id="grid1" ui-grid="gridOptions" ui-grid-pagination="" ui-grid-selection="" class="grid"></div>
      <script src="script.js"></script>
    </div>
  </body>

</html>

var app = angular.module('app', ['ngAnimate','ngTouch', 'ui.grid','ui.grid.selection', 'ui.grid.pagination']);
 
app.controller('MainCtrl', ['$scope','$http','$log','$timeout','uiGridConstants','$templateCache', '$interval', function ($scope,$http,$log,$timeout,$uiGridConstants,$templateCache,$interval) {
	 
	
 $templateCache.put('ui-grid/selectionRowHeaderButtons',
    "<div class=\"ui-grid-selection-row-header-buttons \" ng-class=\"{'ui-grid-row-selected': row.isSelected}\"><input style=\"margin: 0; vertical-align: middle\" type=\"checkbox\" ng-model=\"rowSelected\" ng-click=\"grid.appScope.clickConditionRow(rowSelected) && selectButtonClick(row, $event)\">&nbsp;</div>"
  );


  $templateCache.put('ui-grid/selectionSelectAllButtons',
    "<div class=\"ui-grid-selection-row-header-buttons \" ng-class=\"{'ui-grid-all-selected': grid.selection.selectAll}\" ><input style=\"margin: 0; vertical-align: middle\" type=\"checkbox\" ng-model=\"headerSelected\" ng-click=\"grid.appScope.clickConditionHeader(headerSelected) && headerButtonClick($event)\" ></div>"
  ); 
  
    
 $scope.doingAjaxCall = false;

  // Function to be called "on-click"
  $scope.clickConditionHeader = function(checked) {
    // Check for any other conditions you need
	console.log("Checked passed: "+checked);
	
	 console.log("from Header ajax hi");
    return !$scope.doingAjaxCall;
	
  };
  
  // Function to be called "on-click"
  $scope.clickConditionRow = function(checked) {
   
	console.log("from Row ajax hi");
	console.log("Checked passed: "+checked);
    return !$scope.doingAjaxCall;
	
  };
  
  
 $scope.columns = [ { name:'Id', field: 'id' }, { name:'First Name', field: 'firstName' }, { name:'Last Name', field: 'lastName' }];
 $scope.gridOptions = {
	enableFiltering: true,
	enableRowSelection: true,
    enableSorting: true,
	selectionRowHeaderWidth: 35,
    rowHeight: 35,
    paginationPageSizes: [5,10,20],
    paginationPageSize: 5,
    columnDefs: $scope.columns
    };
	

$scope.gridOptions.multiSelect = true;

$scope.gridOptions.onRegisterApi = function(gridApi){
      //set gridApi on scope
      $scope.gridApi = gridApi;
	  
	  gridApi.selection.on.rowSelectionChanged($scope, function(row) {
		
		console.log("Row " + row.entity.ID + " selected: " + row.isSelected);
		//Set the header here
       
		});//end single row

      // Multiple row selections
      gridApi.selection.on.rowSelectionChangedBatch($scope, function(rows) {  
	 
        $log.log('Multiples rows toggled');
        $log.log('  Simulating ajax call (batch)...');
        $scope.doingAjaxCall = true;
        $timeout(function() {
          $log.log('  ...done with ajax call (batch)');
          $scope.doingAjaxCall = false;
        }, 10);
      });//end batch selection
    }; //end gridApi register
	
	     
$scope.gridOptions.data = [
    {"id":"1","firstName":"John", "lastName":"Joe"},
    {"id":"2","firstName":"Anna", "lastName":"Joe"},
    {"id":"3","firstName":"Peter", "lastName":"Haines"},
     {"id":"4","firstName":"Robert", "lastName":"Jones"},
    {"id":"5","firstName":"Bob", "lastName":"Builder"},
    ];

}]);

/* Styles go here */
.grid {
  width: 500px;
  height: 325px;
}

.ui-grid-row .ui-grid-cell.ui-grid-row-header-cell {
 background-color:white;
   border-bottom: solid 1px #d4d4d4; 
  }


.ui-grid-selection-row-header-buttons {
 cursor: pointer;
  opacity: 1;

}

http://stackoverflow.com/questions/36523754/replace-angular-ui-grid-selection-rowbutton-with-checkbox