скомпилируйте строку html с помощью ng-click внутри цикла foreach

У меня есть древовидная структура с множеством предметов, поэтому она работает очень медленно. Я пытаюсь переписать его в javascript, чтобы получить немного большую производительность. Но я застрял в ng-click:

HTML:

<jstree initialstructure="vm.initialStructure" get-child-nodes="vm.getChildNodes()"></jstree>

JS:

(function () {
angular
    .module('app.jstree')
    .directive('jstree', Jstree);

Jstree.$inject = ['$compile'];

function Jstree($compile) {
    var directive = {
        restrict: 'E',
        controller: 'JstreeController',
        controllerAs: 'jst',
        replace: true,
        scope: {
            initialstructure: '=',
            getChildNodes: '&'
        },
        link:  function (scope, element, attrs) {
                scope.$watch('initialstructure', function (items) {
                    if (items) {
                       var html = "";
                       angular.forEach(items, function (item) {
                           html = html.concat('<li ui-tree-node>' + item.title);
                           var selectedNodeCls = item.selected ? 'selected-node' : '';
                           html = html.concat('<div ui-tree-handle ng-click="alert(item);" class="' + selectedNodeCls + '" tooltip="' + item.title + '">');
                           html = html.concat('</div>');
                           html = html.concat('</li>');
                      });
                      element.html(html);
                      element = $compile(element)(scope);
                   }
                   scope.alert = function(item) {
                         console.log(item); //this is undefined, obviously because it is not on the scope
                   }
               });
            }
    };
    return directive;
  }
})();

как это можно решить?