Can AngularJS directive pick up class name from dynamic content?

Problem

http://jsfiddle.net/xKU5R/

In above case, I'm expecting elements with cls class be picked up with same behavior from within ng-repeat (ng-bind-html-unsafe), and explicitly set one.

<div ng-app="appp">
  <div ng-controller="Ctrl">
    <ul>
      <li ng-repeat="r in data" ng-bind-html-unsafe="r.alink"></li>
    </ul>
    <div class="cls">External</div>
  </div>
</div>

function Ctrl($scope) {
    $scope.data = [
        {alink: '<span><a class="cls">One</a></span>'},
        {alink: '<span><a class="cls">Two</a></span>'}
    ];
}

angular.module('appp', [])
.directive('cls', function() {
    return {
        restrict: 'C',
        replace: true,
        scope: true,
        link: function(scope, element, attrs) {
            element.bind('click', function() {
                alert('Aha!');
            });
        }
    }
});

I'm wondering what do I do wrong here?

Problem courtesy of: simonxy

Solution

The problem is that the new HTML is not being compiled by Angular. The simplest solution may be to manually compile the dynamic content using the $compile service. Do this in a custom directive and replace ng-bind-html-unsafe="r.alink" with something like htmlinsert="r.alink". Here is how that directive could be coded:

angular.module('appp', [])
.directive('htmlinsert',function($compile){
    return {
        scope: {
            htmlinsert: '='    
        },
        link: function(scope,element,attrs){
            var compiledElement = $compile(scope.htmlinsert)(scope);
            element.append(compiledElement); 
        }
    }
});

The reference to the html string is passed using isolate scope binding, and is then compiled before being appended to the current iteration of the repeated DOM element.

Demo: http://jsfiddle.net/sh0ber/CLEqc/

Solution courtesy of: sh0ber

Discussion

There is currently no discussion for this recipe.

This recipe can be found in it's original form on Stack Over Flow.