title: How can an Angular directive compile() function access an isolated scope?
body: <p>I have the following directive:</p>
  
  <pre><code>angular.module("example_module", [])
  .directive("mydirective", function() {
    return {
      scope: { data: "@mydirective" }
      compile: function(element) {
        element.html('{{example}}');
        return function($scope) {
          $scope.example = $scope.data + "!";
        };
      }
    };
  });
  </code></pre>
  
  <p>and the following HTML code:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html ng-app="example_module"&gt;
    &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;title&gt;Example title&lt;/title&gt;
      &lt;script src="lib/angular/angular.min.js"&gt;&lt;/script&gt;
      &lt;script src="js/example.js"&gt;&lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;div mydirective="Hello world"&gt;&lt;/div&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>I would expect the directive to compile to <code>Hello world!</code>, but it compiles to an empty string instead. <code>scope</code> creates an isolated scope which seems impossible to reach for <code>{{example}}</code>.</p>
  
  <p>I would like to know how the new HTML code created by <code>compile()</code> can access the link function <code>$scope</code>.</p>