Angular - How can I remove from the DOM an element I have used $compile on?

Question

What I need is the functionality of two ng-views. Because I can't I want to change the innerHTML of something and compile it. The problem I have is when I change the content again, I can compile, but does angular remove the binding on it's own, or I do I have to do it manually, if so, how?

EDIT: Explaining

I want to make a modal, whose content I can change and bind to different scopes (hence the $compile). But I don't want to destroy the whole modal, just some of its content, and change to another. My main doubt is if by removing some compiled HTML it can lead to memory leaks.

SOLVED

For this problem, I created a new child scope (with $new) and destroyed it whenever I changed the content. Thanks for everything

Answer 1

To manually remove the element do an element.remove(). Sounds like you also want to destroy the scope of your compiled element so you can do that too by doing scope.$destroy(); or $scope.$destroy(); depending on if you're in a directive or not.

http://docs.angularjs.org/api/ng.$rootScope.Scope#$destroy

Answer 2

Thanks for you good solution. I've just posted some implement code

.directive('modal', function($templateCache, $compile) {     return function(scope, element, attrs) {         var currentModalId = attrs.modalId;         var templateHtml = $templateCache.get(attrs.template);         var modalScope, modalElement;          scope.$on('modal:open', function(event, modalId) {             if(modalId == null || currentModalId === modalId) {                 openModal();             }         });          scope.$on('modal:close', function(event, modalId) {             if(modalId == null || currentModalId === modalId) {                 closeModal();             }         });          function openModal() {             // always use raw template to prevent ng-repeat directive change previous layout             modalElement = $(templateHtml);              // create new inherited scope every time open modal             modalScope = scope.$new(false);              // link template to new inherited scope of modal             $compile(modalElement)(modalScope);              modalElement.on('hidden.bs.modal', function() {                 if(modalScope != null) {                     // destroy scope of modal every time close modal                     modalScope.$destroy();                 }                 modalElement.remove();             });              modalElement.modal({                 show: true,                 backdrop: 'static'             });         }          function closeModal() {             if(modalElement != null) {                 modalElement.modal('hide');             }         }     }; });