ng-click won't work with ng-bind-html

Question

I have html template like this:

$scope.template = '<span class="pointer"><i class="icon-refresh pointer" ng-click="refresh()"></i></span>';

I want to bind this template using ng-bind-html , I tried to use it and also I used ng-bind-html-unsafe , but unfortunately It bind the html string as it is with no click action.

<span ng-bind-html="template"></span>
<span ng-bind-html-unsafe="template"></span>

I read about similar problem and it said that ng-click is loaded after ng-bind , so can anybody introduce to me how to solve this problem?

Answer 1

Perhaps you need to compile the template inside the controller?

angular.controller('ABCDCtrl', function($scope, $compile){
    var templateHTML = '<span class="pointer"><i class="icon-refresh pointer" ng-click="refresh()"></i></span>';
    $scope.template = $compile(templateHTML)($scope);
});

Answer 2

You could try ng-include and put your template in to a static file instead.

Putting HTML content in scope variables kind of goes against some angular philosophy guidelines, I believe.

If you were to later change the template, would you want it to rebind itself and be processed again?