Check this example. Now please take its reference and correct your code.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.3.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.8/angular.min.js"></script>
<link rel="stylesheet" href="//cdn.rawgit.com/angular-ui/ng-grid/v2.0.14/ng-grid.css" />
<script type="text/javascript" src="//cdn.rawgit.com/angular-ui/ng-grid/v2.0.14/build/ng-grid.js"></script>
<script type="text/javascript">
var app = angular.module('MyApp', ['ngGrid']);
app.controller('MyController', function ($scope) {
$scope.gridData = [
{ Id: 1, Name: 'Nancy Davolio', City: 'Seattle', Country: 'USA', "checker": false },
{ Id: 2, Name: 'Andrew Fuller', City: 'Tacoma', Country: 'USA', "checker": true },
{ Id: 3, Name: 'Janet Leverling', City: 'Kirkland', Country: 'USA', "checker": true },
{ Id: 4, Name: 'Margaret Peacock', City: 'Redmond', Country: 'USA', "checker": true },
{ Id: 5, Name: 'Steven Buchanan', City: 'London', Country: 'UK', "checker": true },
{ Id: 6, Name: 'Michael Suyama', City: 'London', Country: 'UK', "checker": true },
{ Id: 7, Name: 'Robert King', City: 'London', Country: 'UK', "checker": true },
{ Id: 8, Name: 'Laura Callahan', City: 'Seattle', Country: 'USA', "checker": true },
{ Id: 9, Name: 'Anne Dodsworth', City: 'London', Country: 'UK', "checker": true }
];
$scope.columnDefs = [
{
sortable: false,
field: 'checker',
displayName: '',
headerCellTemplate:
"<div class=\"ngHeaderSortColumn {{col.headerClass}}\" ng-style=\"{'cursor': col.cursor}\" ng-class=\"{ 'ngSorted': !noSortVisible }\"> \
<div ng-click=\"col.sort($event)\" ng-class=\"'colt' + col.index\" class=\"ngHeaderText\"> \ {{col.displayName}} \
<input type=\"checkbox\" ng-model=\"checker.checked\" ng-change=\"toggleCheckerAll(checker.checked);\"> \</div> \</div>",
cellTemplate:
"<div class=\"ngCellText\" ng-class=\"col.colIndex()\"> \
<input type=\"checkbox\" ng-input=\"COL_FIELD\" ng-model=\"COL_FIELD\" ng-change=\"toggleChecker(COL_FIELD)\"> \</div>"
},
{ field: "Id", width: 50, sortable: false, enableCellEdit: false },
{ field: "Name", width: 150, sortable: true, enableCellEdit: false },
{ field: "City", width: 100, sortable: true, enableCellEdit: false },
{ field: "Country", width: 100, sortable: true, enableCellEdit: false }
];
$scope.gridOptions = {
data: 'gridData',
enableCellSelection: false,
enableRowSelection: false,
columnDefs: 'columnDefs'
};
$scope.toggleCheckerAll = function (checked) {
for (var i = 0; i < $scope.gridData.length; i++) {
$scope.gridData[i].checker = checked;
}
};
$scope.toggleChecker = function (checked) {
var rows = $scope.gridOptions.$gridScope.renderedRows;
var allChecked = true;
for (var r = 0; r < rows.length; r++) {
if (rows[r].entity.checker !== true) {
allChecked = false;
break;
}
}
if (!$scope.gridOptions.$gridScope.checker) {
$scope.gridOptions.$gridScope.checker = {};
}
$scope.gridOptions.$gridScope.checker.checked = allChecked;
};
});
</script>
</head>
<body>
<div ng-app="MyApp" ng-controller="MyController">
<div ng-grid="gridOptions" style="width: 450px; height: 350px">
</div>
</div>
</body>
</html>
