How to stop nested directive execution from an outer directive?
<p>I'm creating a directive which will restrict HTML access if some condition are not met. Unfortunately issue arises when inner directives get called before inner HTML is changed and compiled.</p>

<p>Is it possible to stop nested directive execution from any outer directive?</p>

<p>Example (see console): <a href="http://jsfiddle.net/xaQzb/14/" rel="nofollow">http://jsfiddle.net/xaQzb/14/</a></p>

<p>HTML:</p>

<pre><code>&lt;div ng-app="testApp"&gt;
  &lt;outer-element&gt;
    &lt;inner-element&gt;
    &lt;/inner-element&gt;
  &lt;/outer-element&gt;
&lt;/div&gt;
</code></pre>

<p>App</p>

<pre><code>angular.module('testApp', []);

var app = angular.module('testApp');

app
  .directive('outerElement', ['$compile', function($compile) {

    function linker(scope, element) {
      element[0].innerHTML = 'Replaced HTML and should not execute anything inside';
      $compile(element.contents())(scope);
    }

    return {
      restrict: 'E',
      scope: false,
      link: linker
    }
  }]);

app
  .directive('innerElement', function() {

    function linker(scope, element) {
      console.log('Directive has been called');
    }

    return {
      restrict: 'E',
      scope: false,
      link: linker
    }
  });
</code></pre>