I have a directive that compiles another directive and attaches it to the body with the same scope passed. This will not be the same location as the \"parent\" directive.
directive("childDirective", function(){ return { restrict: 'C', template: 'Child Directive', link: function(scope, element){ scope.$on("$destroy",function() { element.remove(); }); } } });
updated fiddle : http://jsfiddle.net/C8hs6/