Angular ui-grid unable to load html file with filterHeaderTemplate

Question

I tried to include an HTML file in my Angular ui-grid.
The problem is that the file don't seems to be injected into my page.

JS grid code :

    $scope.gridDesign = {
            paginationPageSizes: [25, 50, 75],
            paginationPageSize: 25,
            enableColumnResizing: true,
            enableGridMenu: true,
            enableSelectAll: true,
            enableRowSelection: true,
            enableFiltering: true,
            exporterMenuCsv: true,
            exporterMenuPdf: true,
            exporterCsvColumnSeparator: ';',
            data: self.loadData(),
            columnDefs: 
                    [{
                        field: "id",
                        enableColumnResizing : true,
                        displayName: $filter('translate')(
                                'ID'
                        )
                    }, {
                        field: "name",
                        enableColumnResizing : true,
                        displayName: $filter('translate')(
                                'NAME'
                        )
                    }, {
                        field: "createdDate",
                        enableColumnResizing : true,
                        type: 'date',
                        filterHeaderTemplate: 'app/components/design/filter-header-date.html',
                        cellFilter: 'date:"dd/MM/yyyy"',
                        displayName: $filter('translate')(
                        'CREATED_DATE'),
                        filters: [
                                  {
                                    condition: function(term, value){
                                          var valueDate = new Date(value);
                                          valueDate.setHours(0,0,0,0);
                                          return valueDate.getTime() == term.getTime();
                                      }
                                  }
                              ]
                    }]

    };

HTML file :

 <div class="ui-grid-filter-container" ng-repeat= "colFilter in incol.filters" >
    <input type= "text" uib-datepicker-popup="{{datePicker.format}}" datepicker-options="datePicker.options" datepicker-append-to-body="true" show-button-bar="false"
                       is-open= "showDatePopup[$index].opened" class="ui-grid-filter-input ui-grid-filter-input-{{$index}}" 
                       style="font-size:1em; width:11em!important" ng-model= "colFilter.term" ng-attr-placeholder="{{colFilter.placeholder || ''}}"
                       aria-label= "{{colFilter.ariaLabel || aria.defaultFilterLabel}}" />
     <span style="padding-left:0.3em;">
            <button type= "button" class= "btn btn-default btn-sm" ng-click="showDatePopup[$index].opened=true">
                <i class= "glyphiconglyphicon-calendar"></i>
            </button>
     </span>
    <div role= "button" class= "ui-grid-filter-button" ng-click= "removeFilter(colFilter, $index)" ng-if=
        "!colFilter.disableCancelFilterButton" ng-disabled= "colFilter.term=== undefined || colFilter.term===
        null || colFilter.term=== ''" ng-show= "colFilter.term !== undefined && colFilter.term !==
        null && colFilter.term !==''">
        <i class= "ui-grid-icon-cancel" ui-grid-one-bind-aria-label="aria.removeFilter">&nbsp;</i>
    </div>
</div>
<div ng-if= "colFilter.type==='select'">
    <select class= "ui-grid-filter-select ui-grid-filter-input-{{$index}}" ng-model="colFilter.term" 
        ng-attr-placeholder= "{{colFilter.placeholder || aria.defaultFilterLabel}}" aria-label="{{colFilter.ariaLabel || ''}}" 
        ng-options= "option.value as option.label for option incolFilter.selectOptions">
        <option value=""></option>
    </select>
    <div role= "button" class= "ui-grid-filter-button-select" ng-click= "removeFilter(colFilter, $index)"
            ng-if="!colFilter.disableCancelFilterButton" ng-disabled= "colFilter.term=== undefined || colFilter.term===null || colFilter.term=== ''" 
            ng-show="colFilter.term !== undefined && colFilter.term !=null">
        <i class= "ui-grid-icon-cancel" ui-grid-one-bind-aria-label="aria.removeFilter">&nbsp;</i>
    </div>
</div>

In my chrome console I can only see the following :
"fetching url app/components/design/filter-header-date.html"
And don't have any other error.

Does anybody has a idea of what's the problem ?

Answer 1

as a workaround:

filterHeaderTemplate: "<div ng-include=\"'path/to/filterTemplate.html'\"></div>";

this simply loads the file through ng-include instead