UI-Grid header cell template example

var app = angular.module('app', ['ui.grid']);

app.controller('MainCtrl', ['$scope', function($scope) {

    $scope.myData = [{
        "firstName": "Cox",
        "lastName": "Carney",
        "company": "Enormo",
        "employed": true
    }, {
        "firstName": "Lorraine",
        "lastName": "Wise",
        "company": "Comveyer",
        "employed": false
    }, {
        "firstName": "Nancy",
        "lastName": "Waters",
        "company": "Fuelton",
        "employed": false
    }];
    
    var columnDefs = [
        {field: 'employed', displayName: 'Employed', width: '25', cellTemplate: 'cellTemplate.html', headerCellTemplate: 'headerTemplate.html', enableSorting: false},
        {field: 'firstName', displayName: 'First Name'},
        {field: 'lastName', displayName: 'Last Name'},
        {field: 'company', displayName: 'Company'}
    ];
    
    $scope.gridOptions = {
        data: 'myData',
        columnDefs: columnDefs
    };
    
}]);

.grid {
  width: 500px;
  height: 250px;
}

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

<head>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular-touch.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular-animate.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-unstable.js"></script>
    <link rel="stylesheet" href="http://ui-grid.info/release/ui-grid-unstable.css" type="text/css">
    <link rel="stylesheet" href="main.css" type="text/css">
</head>

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

</html>

<div>
    <div class="ui-grid-vertical-bar">&nbsp;</div>
    <div class="ui-grid-cell-contents">
        <input style="margin: 0; vertical-align: middle" type="checkbox">
    </div>
</div>

<div class="ui-grid-cell-contents">
    <input style="margin: 0; vertical-align: middle" type="checkbox">
</div>