Does AngularJs automatically destroy scope when an element is removed from a directive?

Question

Say I have directive:

angular.module('myApp').directive('myDirective', function ($compile) {
    return {
        link: function ($scope, $element, $attrs) {
            var $randomElem = $('<div>');
            $element.append($compile($randomElem)($scope));

            $randomElem.remove();
        }
    }
});

Will the scope be automatically destroyed? If not, how can I destroy it?

Answer 1

In your case your $randomElem will have the same scope as its parent (the directive container). So it won't be destroyed.

Now it you were to create a new scope for this element:

// Case 1: child scope sharing the properties with parent
$element.append($compile($randomElem)($scope.$new()));

// case 2: child scope isolated, no sharing with parent
$element.append($compile($randomElem)($scope.$new(true)));

Then you would need to manually destroy the scope when removing the element. For tha you can use $scope.$destroy()

For instance:

var newScope = $scope.$new();
$element.append($compile($randomElem)(newScope));


newScope.$destroy(); // or $randomElem.scope().$destroy();
$randomElem.remove();