title: Custom header template for ui-grid , angular
body: <p>I was trying <a href="http://ui-grid.info/docs/#/tutorial" rel="noreferrer">angular's ui-grid</a> for a project but finding it difficult to built a custom template for my grid . When I checked the source code , I got the below html template I saved it to a file , header-template.html and referenced it while configuring the grid. </p>
  
  <pre><code>&lt;div class="ui-grid-header"&gt;
    &lt;div class="ui-grid-top-panel"&gt;
      &lt;div ui-grid-group-panel="" ng-show="grid.options.showGroupPanel" class=""&gt;
        &lt;div class="ui-grid-group-panel ng-scope"&gt;
          &lt;div ui-t="groupPanel.description" class="description " ng-show="groupings.length == 0"&gt;
            Drag a column header here and drop it to group by that column.&lt;/div&gt;
          &lt;ul ng-show="groupings.length &gt; 0" class="ngGroupList "&gt;
            &lt;!-- ngRepeat: group in configGroups --&gt;
          &lt;/ul&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="ui-grid-header-viewport"&gt;
        &lt;div class="ui-grid-header-canvas"&gt;
           &lt;!--ngRepeat: col in colContainer.renderedColumns track by col.colDef.name --&gt;
          &lt;div class="ui-grid-header-cell clearfix" ng-repeat="col in colContainer.renderedColumns track by col.colDef.name" ui-grid-header-cell="" col="col" render-index="$index" ng-style="$index === 0 &amp;amp;&amp;amp; colContainer.columnStyle($index)"&gt;
            &lt;div ng-class="{ 'sortable': sortable }" class="sortable"&gt;
              &lt;div class="ui-grid-vertical-bar"&gt;&amp;nbsp;&lt;/div&gt;
              &lt;div class="ui-grid-cell-contents" col-index="renderIndex"&gt;
                &lt;span class=""&gt;{{col.colDef.name}}&lt;/span&gt;
                &lt;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 }" class="ui-grid-invisible ui-grid-icon-blank"&gt;&amp;nbsp;&lt;/span&gt;
              &lt;/div&gt;
              &lt;!-- ngIf: grid.options.enableColumnMenus &amp;&amp; !col.isRowHeader  &amp;&amp; col.colDef.enableColumnMenu !== false --&gt;
              &lt;!-- ngRepeat: colFilter in col.filters --&gt;
              &lt;!-- ngIf: filterable --&gt;
              &lt;div ng-if="filterable" class="ui-grid-filter-container" ng-repeat="colFilter in col.filters"&gt;
                {{colFilter}}
                &lt;input type="text" class="ui-grid-filter-input" ng-model="colFilter.term" ng-click="$event.stopPropagation()" ng-attr-placeholder="{{colFilter.placeholder || ''}}" placeholder=""&gt;
                &lt;div class="ui-grid-filter-button" ng-click="colFilter.term = null"&gt;
                  &lt;i class="ui-grid-icon-cancel right" ng-show="!!colFilter.term"&gt;&amp;nbsp;&lt;/i&gt;
                  &lt;!-- use !! because angular interprets 'f' as false --&gt;
                &lt;/div&gt;
              &lt;/div&gt;
              &lt;!-- end ngIf: filterable --&gt;&lt;!-- end ngRepeat: colFilter in col.filters --&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;!-- end ngRepeat: col in colContainer.renderedColumns track by col.colDef.name --&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div ui-grid-menu="" class=""&gt;&lt;!-- ngIf: shown --&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I have specified the gridOptions by </p>
  
  <pre><code>   $scope.gridOptions = {
      data: 'gridData',
      enableRowHeaderSelection: false,
      multiSelect: false,
      enableFiltering: true,
      columnDefs: $scope.columnDef,
      enableColumnMenus: false,
      headerTemplate:'views/header-template.html'
    };
  </code></pre>
  
  <p>But for some reason , I dont know why , I m getting this , as shown in the image . The template gets printed once again , below the template that I try to build </p>
  
  <p><img src="https://i.stack.imgur.com/V466D.png" alt="enter image description here"></p>
  
  <p>Please help ..</p>