title: Accessing angular directive (element)'s text inside the template
body: <p>So I am following <a href="http://www.youtube.com/watch?v=A6wq16Ow5Ec" rel="noreferrer">this EggHead.io tutorial</a> on custom components, and I came across this problem. When declaring a directive such as: </p>
  
  <pre><code>angular.module('myApp', [])
      .directive('myDir', function(){
          return {
              restrict: "E",
              controller: "myController",
              link: function(scope, element, attrs) {
                  scope.foo = element.text();
              },
              templateUrl: "myDirTemplate.html"
          }
      });
  </code></pre>
  
  <p>and the Template being:</p>
  
  <pre><code>&lt;div&gt;The value is: {{foo}}&lt;/div&gt;
  </code></pre>
  
  <p>and the directive being used such as follows:</p>
  
  <pre><code>&lt;html&gt;
  ...
  &lt;myDir&gt;Bar&lt;/myDir&gt; 
  ...
  &lt;/html&gt;
  </code></pre>
  
  <p><em>element</em> in the <em>link function</em> refers to the </p>
  
  <pre><code>&lt;div&gt;The value is: {{foo}}&lt;/div&gt;
  </code></pre>
  
  <p>in the template. If I don't specify the <em>templateUrl</em>, then <em>element</em> refers to the </p>
  
  <pre><code>&lt;myDir&gt;Bar&lt;/myDir&gt; 
  </code></pre>
  
  <p>in the main view, which is what I want. I was hoping the directive would take the "Bar" text and insert it into the {{foo}}, giving the final result of:</p>
  
  <pre><code>&lt;div&gt;The value is: Bar&lt;/div&gt; 
  </code></pre>
  
  <p>But I don't know how to get around angular selecting the template's element every single time.</p>
  
  <p>Any ideas? </p>