How to display dynamic HTML in uib-popover inject into uib-grid

I want to display a dynamic generated HTML in uib-popover, and it's shown when a <i> is clicked in each column header of uib-grid. The ng directives and variables also need to be active, such as ng-click, $scope etc.

I tried to use the headerCellTemplate in each column definition of uib-grid for displaying the<i>tag, and I passed a dynamic generated HtML to each column definition, so that I can get it in the headerCellTemplate with col.displayName.popoverTemplate, It works fine. But I can't pass any variables in to popover use $scope, and ng-click don't work at all. Someone said I need to compile the HTML or use the uib-popover-template, how do I pass params to uib-popover-html or there is another way.

THANKS!

columnDefs

columnDefs.push({
  name:'columnViewData._name',
  displayName:{//use this file to pass params into uib-grid headers
    displayName:'columnName',
    popoverTemplate:generatePopoverTemplate(),//template should be shown in popover for this column header
    customerScope:$scope//current scope, I hope popover can access it
  },
  width:100,
  enableColumnMenu:false,
  pinnedLeft:true,
  headerCellTemplate:generateUIGridHeaderTemplate('name',0)
});

Column header template:

      var generateUIGridHeaderTemplate = function(columnName,type){
            return "\
<div role=\"columnheader\" ng-class=\"{ 'sortable': sortable }\" ui-grid-one-bind-aria-labelledby-grid=\"col.uid + '-header-text ' + col.uid + '-sortdir-text'\" aria-sort=\"{{col.sort.direction == asc ? 'ascending' : ( col.sort.direction == desc ? 'descending' : (!col.sort.direction ? 'none' : 'other'))}}\">\
  <div style=\"margin-top:0.3em;\">\
  <div style=\"display:inline;\" role=\"button\" tabindex=\"0\" class=\"ui-grid-cell-contents ui-grid-header-cell-primary-focus\" col-index=\"renderIndex\" title=\"TOOLTIP\">\
    <span class=\"ui-grid-header-cell-label\" ui-grid-one-bind-id-grid=\"col.uid + '-header-text'\">\
      {{ col.displayName.displayName CUSTOM_FILTERS }}\
    </span> \
    <span ui-grid-one-bind-id-grid=\"col.uid + '-sortdir-text'\" ui-grid-visible=\"col.sort.direction\" aria-label=\"{{getSortDirectionAriaLabel()}}\">\
      <i 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 }\" title=\"{{isSortPriorityVisible() ? i18n.headerCell.priority + ' ' + ( col.sort.priority + 1 )  : null}}\" aria-hidden=\"true\">\
      </i> \
      <sub ui-grid-visible=\"isSortPriorityVisible()\" class=\"ui-grid-sort-priority-number\">\
        {{col.sort.priority + 1}}\
      </sub>\
    </span>\
  </div>\
  <i style=\"margin-left:-1em;\" class=\"glyphicon glyphicon-filter\" popover-placement='bottom' uib-popover-html=\"col.displayName.popoverTemplate\" popover-title=\"Filter\" popover-append-to-body=\"true\">\
  </i>\
<!-- above line is the popover togger shown in the column header-->\
  </div>\
  <div role=\"button\" tabindex=\"0\" ui-grid-one-bind-id-grid=\"col.uid + '-menu-button'\" class=\"ui-grid-column-menu-button\" ng-if=\"grid.options.enableColumnMenus && !col.isRowHeader  && col.colDef.enableColumnMenu !== false\" ng-click=\"toggleMenu($event)\" ng-class=\"{'ui-grid-column-menu-button-last-col': isLastCol}\" ui-grid-one-bind-aria-label=\"i18n.headerCell.aria.columnMenuButtonLabel\" aria-haspopup=\"true\">\
    <i class=\"ui-grid-icon-angle-down\" aria-hidden=\"true\">\
      &nbsp;\
    </i>\
  </div>\
  <div ui-grid-filter>\
  </div>\
</div>"}

Popover template

var generatePopoverTemplate = function(){
  var t = $sce.trustAsHtml('<a class="btn" ng-click="alert(\'asd\')">asd</a>');
  $compile(t)($scope);
  return t;
}

I solved my question :) Generate the popover template and put it in to $compileCache with an Id then uib-popover-template property can find it and ng works fine.