How to force $scope to re-compile its contents and re-link directives

Question

Ihave a class of elements that on user request gets reset - it is destroyed (alas!) and recreated from scratch. At that moment directive that is attached to that class gets destroyed too. The question is how can we force angular (ie. the controller that this element belongs to) from the outside world to recompile the scope and re-attach the directive.

So, I have a ref to the scope the element was in: angular.element(myDom).scope()... How do I kick angular to recompile it anew and attach the directives?

angular.element(myDom).scope().$digest(); nor .$apply would not work for me.

Answer 1

To recompile directives from outside the application, you'll need $compile and $injector. Below is a code snippet from angular.injector documentation, adapted to your code:

angular.element(document).injector().invoke(function($compile) {
    var scope = angular.element(myDom).scope();
    $compile(myDom)(scope);
});

The code finds the injector for the document and invokes the given function, using injection to get $compile. $compile is then used to recompile the directives of myDom using its scope.