How to re-render a template in an AngularJS directive?

A few advices:

1. Use directive template and bind variables to scope rather than creating HTML manually. In this case you don't need to re-render template. Angular will update it itself when scope properties change.

2. Use attrs.$observe function to run some code on attribute value change

Here is a reusable directive you could use that will rebuild the transcluded content whenever an event is sent:

app.directive('relinkEvent', function($rootScope) {
    return {
        transclude: 'element',
        restrict: 'A',
        link: function(scope, element, attr, ctrl, transclude) {
            var previousContent = null;

            var triggerRelink = function() {
                if (previousContent) {
                    previousContent.remove();
                    previousContent = null;
                }

                transclude(function (clone) {
                    element.parent().append(clone);
                    previousContent = clone;
                });

            };

            triggerRelink();                
            $rootScope.$on(attr.relinkEvent, triggerRelink);

        }
    };

});

Here is a jsFiddle demoing how it works: http://jsfiddle.net/robianmcd/ZQeU5/

Notice how the content of the input box gets reset every time you click the "Trigger Relink" button. This is because the input box is being remove and added to the DOM whenever the event is triggered.

You could use this directive as is or modify it so that it is triggered by scope.$watch() instead of an event.