How to force recompile an isolated-scoped directive?

There are several SO posts about updating a directive when a value (model) changes:

• Angular Updating directive when parameters change
• AngularJS directive doesn't update if scope variable changes

The recommended approach is to look at the value scope

in the binding function :

link: function(scope, element, attrs) {
    scope.$watch("typeId",function(newValue,oldValue) {
        // This gets called when data changes.
    });
 }

      

        
        
        
      

    

Taking into account the implementation of the following directives recursive , <my-directive>

:

angular.module('Myapp').directive("MyDirective", function(RecursionHelper) {
    return {
        restrict: "E",
        scope: {
            data: '=data'
        },
        templateUrl: 'view.html',
        compile: function(tElement, tAttributes) {
            return RecursionHelper.compile(tElement, tAttributes);
        }
    };
});

      

        
        
        
      

    

... and the RecursionHelper:

angular.module('Myapp').factory('RecursionHelper',
    ['$compile',
    function($compile) {
         var RecursionHelper = {
            compile: function(tElement, tAttrs) {

                var contents = tElement.contents().remove();
                var compiledContents;

                return {
                    post: function(scope, iElement, iAttrs) {
                        if (!compiledContents) {
                            compiledContents = $compile(contents);
                        }

                        compiledContents(scope, function(clone) {
                            iElement.append(clone);
                        });
                    },
                    pre: function(scope, iElement, iAttrs) { }
                }
            }
        }
        return RecursionHelper;
    }]);

      

        
        
        
      

    

I could add a listener to my bind function:

angular.module('Myapp').factory('RecursionHelper',
    ['$compile','MyService',
    function($compile, MyService) {
         var RecursionHelper = {
            compile: function(tElement, tAttrs) {

                var contents = tElement.contents().remove();
                var compiledContents;

                return {
                    post: function(scope, iElement, iAttrs) {
                        if (!compiledContents) {
                            compiledContents = $compile(contents);
                        }

                        compiledContents(scope, function(clone) {
                            iElement.append(clone);
                        });

                        // The listener function.
                        scope.$watch(MyService.data,function(newValue,oldValue) {
                           // This gets called when data changes.
                        });
                    },
                    pre: function(scope, iElement, iAttrs) { }
                }
            }
        }
        return RecursionHelper;
    }]);

      

        
        
        
      

    

I added a Service MyService

that contains data that can change and that I listen to. The first call to the render directive starts with main.html

:

<my-directive data="data"></my-directive>

      

        
        
        
      

    

The compilation function of the directive is called and eventually a template is created view.html

containing the recursive directive:

<span ng-repeat="item in data.items">
      <my-directive data="item"></my-directive>
</span>

      

        
        
        
      

    

Since the attribute <my-directive> data

has an isolated scope, each nested directive will have its own sandboxed scope.

Questions

• The function is $watch
  
  never called, even if MyService.data
  
  changed. Is it because the directive has an isolated scope?
• Assuming my function $watch
  
  is being called, what is the actual implementation to trigger the recompilation? The SO posts only have comments on the console.log statements, but I can't seem to find anything when rendering the entire (root) directive.