title: How to force recompile of directive with isolated scope?
body: <p>There are a few SO posts about refreshing a directive when a (model) value changes:</p>
  
  <ul>
  <li><a href="https://stackoverflow.com/questions/20856824/angular-directive-refresh-on-parameter-change">Angular Directive refresh on parameter change</a></li>
  <li><a href="https://stackoverflow.com/questions/20068526/angularjs-directive-gets-not-updated-if-scope-variable-changes">AngularJS directive gets not updated if scope variable changes</a></li>
  </ul>
  
  <p>The recommended approach is to watch a value on the <code>scope</code> <strong>in the linking function</strong>:</p>
  
  <pre><code>link: function(scope, element, attrs) {
      scope.$watch("typeId",function(newValue,oldValue) {
          // This gets called when data changes.
      });
   }
  </code></pre>
  
  <p>Given the following implementation of the <strong>recursive</strong> directive, <code>&lt;my-directive&gt;</code>:</p>
  
  <pre><code>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);
          }
      };
  });
  </code></pre>
  
  <p>...and the RecursionHelper:</p>
  
  <pre><code>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;
      }]);
  </code></pre>
  
  <p>I could add the listener to my linking function:</p>
  
  <pre><code>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;
      }]);
  </code></pre>
  
  <p>I have added a Service, <code>MyService</code>, which contains data that may change and that I'm listening for. The first call to render the directive is started with <code>main.html</code>:</p>
  
  <pre><code>&lt;my-directive data="data"&gt;&lt;/my-directive&gt;
  </code></pre>
  
  <p>The directive's compile function is called and ultimately the template, <code>view.html</code> is rendered containing the recursive directive:</p>
  
  <pre><code>&lt;span ng-repeat="item in data.items"&gt;
        &lt;my-directive data="item"&gt;&lt;/my-directive&gt;
  &lt;/span&gt;
  </code></pre>
  
  <p>Since the <code>&lt;my-directive&gt; data</code> attribute has isolated scope, each nested  directive will have its own 'sandboxed' scope.</p>
  
  <p>Questions</p>
  
  <ul>
  <li>My <code>$watch</code> function never gets called even though <code>MyService.data</code> is modified. Is this because the directive has isolated scope?</li>
  <li>Assuming my <code>$watch</code> function is called, what is the actual implementation to trigger a recompilation? The SO posts just have comments of console.log statements, but I can't find anything on rendering the entire (root) directive again.</li>
  </ul>