angularjs - Dynamically loading a template leaves the old template / scope on the page -

we're trying dynamically load , compile dom elements sake of ab testing in angular. far, code works pretty well:

myapp.directive('testing', ['$http', '$templatecache', '$compile', '$window',  function($http, $templatecache, $compile, $window) {     return {         restrict: 'a',         compile: function(telement, tattrs, transclude) {             return {                 pre: function(scope , elm, iattrs) {                     var test = iattrs.testing                      //ensure test in place                     if ( typeof angular.testing[test]== "undefined" || !angular.testing[test].template )                         return false;                      //build template path                     var tmpname = "/angular/app/testing/"+test+"/"+angular.testing[test].template+".html"                      //hide original template change doesn't flash                     angular.element(elm).css('display', 'none')                      //retrieve new template                     $http.get(tmpname, {cache: $templatecache}).success(function(tplcontent){                         //compile                         var compiled = $compile(tplcontent)(scope)                         //replace element new compiled template                         elm.replacewith(compiled)                     })                 }             }         }     }     }]) 

you can apply on things this:

<div testing="mytest"></div> 

and testing software can set variations this

angular.testing.mytest = {template: "newtest"} 

the problem i'm seeing element that's being replaced still present on page (though hidden somewhere - don't see it, can find debugging), , it's causing internal directives fail. also, trying remove or null out doesn't have effect.

any advice?

the problem though remove subtree dom never de-register click handler offclick sets on document.

specifically,

scope.$on("$destroy", ...) 

never fires since scope never destroyed.

use, instead, elm.on("$destroy", ... de-register click handler:

elm.on("$destroy", function(){   $document.off('click', handler); }); 

off-topic:

1. are sure need set click handler on document each offclick? if had 2 of these, each set handler.

2. i don't recommend extending angular object own properties. i'm referring angular.testing = {}.