Angular - how do I keep from rendering template until an event fires?

Angular - how do I keep from rendering template until an event fires?

I have a directive that looks something like the code below. It works
fine, but I have had to resort to creating inline template code since I
don't want the template to render until the click event has fired. But it
would be cleaner if I could assign the directive template and delay
rendering until the event has fired.
Is there a way to do this?
(function() {
app.directive("nodeTabset", function($compile) {
return {
restrict: "A",
scope: '&',
controller: [
'$scope', '$element', '$attrs', '$compile', function($scope,
$element, $attrs, $compile) {
var TABS;
// Ad hoc template
TABS = "<div id='node-tabset-wrapper'>\n <div
id='node-tabset'>\n <div>Set Attribute</div>\n <div
ng-show='node.name == \"a\"'>Set Scrape Job</div>\n </div>\n
<div id='node-tabset-corner'></div>\n</div>";
$scope.selectNode = function(node) {
node.addClass("selected");
node.prepend(TABS);
$compile(node.children()[0])($scope);
return $scope.$apply();
};
return $scope.evaluateSelection = function($event) {
var parent,
parent = angular.element($event.currentTarget).parent();
// do some stuff
return $scope.selectNode(parent);
};
}
],
link: function(scope, element, attrs, controller) {
return element.bind('click', scope.evaluateSelection);
}
};
});
}).call(this);