Memory leak when manually compiling directives in Angular <p>I'm trying to manually compile a directive and add it to the DOM via JQuery. The directive is a simple div with an ngClick handler. No JQuery plugins are used in the directive itself (which seems to be the focus of many of the other memory leak threads).</p> <p>If you run a profiler you will find that it leaks nodes. Is there something that can be done to fix this or is it a problem in JQuery/Angular?</p> <p><a href="http://jsfiddle.net/wsgKL/1/" rel="nofollow">Fiddle here</a><br> <a href="http://postimg.org/image/8rx18ln7n/" rel="nofollow">Profiler screenshot</a></p> <p>HTML</p> <pre><code>&lt;div ng-app="TestApp"&gt; &lt;buttons&gt;&lt;/buttons&gt; &lt;div id="container"&gt;&lt;/div&gt; &lt;/div&gt; </code></pre> <p>Javascript</p> <pre><code>var ButtonsCtrl = function($scope, $compile) { this.scope = $scope; this.compile = $compile; }; ButtonsCtrl.prototype.toggle = function() { var c = angular.element('#container').children(); if (0 in c &amp;&amp; c[0]) { c.scope().$destroy(); c.remove(); } else { var s = this.scope.$new(); this.compile('&lt;thing color="blue"&gt;&lt;/thing&gt;')(s).appendTo('#container'); } }; var ThingCtrl = function($scope) {}; ThingCtrl.prototype.clicky = function() { alert('test'); }; var module = angular.module('components', []); module.directive('buttons', function() { return { restrict: 'E', template: '&lt;button ng-click="ctrl.toggle()"&gt;toggle&lt;/button&gt;', controller: ButtonsCtrl, controllerAs: 'ctrl' } }); module.directive('thing', function() { return { restrict: 'E', scope: { color: '@' }, template: '&lt;div style="width:50px;height:50px;background:{{color}};" ng-click="ctrl.clicky()"&gt;&lt;/div&gt;', controller: ThingCtrl, controllerAs: 'ctrl' }; }); angular.module('TestApp', ['components']); </code></pre>