Custom header template for ui-grid , angular

To obtain what I was trying to achieve I had to specify a headerCellTemplate(Not headerTemplate) within the columnDefs of the grid as given below :

          {
        field: key, displayName: key
        , headerCellTemplate: '<div ng-class="{ \'sortable\': sortable }">' +
      '<div class="ui-grid-vertical-bar">&nbsp;</div>' +
      '<div class="ui-grid-cell-contents" col-index="renderIndex">' +
      '<span ui-grid-visible="col.sort.direction" ng-class="{ \'ui-grid-icon-up-dir\': col.sort.direction == asc, \'ui-grid-icon-down-dir\': col.sort.direction == desc, \'ui-grid-icon-blank\': !col.sort.direction }">' +
      '&nbsp;' +
      '</span>' +
      '</div>' +
      '<div class="ui-grid-column-menu-button" ng-if="grid.options.enableColumnMenus && !col.isRowHeader  && col.colDef.enableColumnMenu !== false" class="ui-grid-column-menu-button" ng-click="toggleMenu($event)">' +
      '<i class="ui-grid-icon-angle-down">&nbsp;</i>' +
      '</div>' +
      '<div ng-if="filterable" class="ui-grid-filter-container" ng-repeat="colFilter in col.filters">' +
      '<input type="text" class="ui-grid-filter-input" ng-model="colFilter.term" ng-attr-placeholder="{{col.displayName || \'\'}}" />' +
      '<div class="ui-grid-filter-button" ng-click="colFilter.term = null">' +
      '<i class="ui-grid-icon-cancel" ng-show="!!colFilter.term">&nbsp;</i>' + <!-- use !! because angular interprets 'f' as false -->
      '</div>' +
      '</div>' +
      '</div>'
      }

Because for ui-grid , headerCellTemplate is appended inside the headerTemplate .The default headerCellTemplate is provided in the following link

Thank You