title: AngularJS : Customizing the template within a Directive that includes references to scoped attributes
body: <p>I'm trying to customize a template within a directive and include references to attributes in the parent scope.  I'm pretty new to Angular but I've done a fair bit of searching and I've based my attempts on <a href="https://stackoverflow.com/q/10629238/2142116">Customizing the template within a Directive</a>.  However if I pass a reference to a parent scoped variable as an attribute to the directive it doesn't get resolved, possibly because it's still undefined at the time the compile function is called.</p>
  
  <p>My directive definition looks like this:</p>
  
  <pre><code>app.directive('sectionHeader', function() {
    return {
      restrict: 'EC',
      replace: true,
      transclude: true,
      scope: {sectionName:'@sectionName', imageUrl:'@imageUrl'},
      compile: function(element, attrs) {
        var imageHtml = attrs.hasOwnProperty('imageUrl') ? '&lt;div style="float: left; padding-right: 5px;"&gt;&lt;img class="float_left" src="' + attrs.imageUrl + '" alt=""/&gt;&lt;/div&gt;' : '';
        var htmlText =
          '&lt;div&gt;' + imageHtml + '&lt;h1 class="float-left"&gt;' + attrs.sectionName + '&lt;/h1&gt;' +
          '&lt;div class="clear"&gt;&lt;/div&gt;' +
          '&lt;div class="modal_hr"&gt;&lt;/div&gt;&lt;/div&gt;';
        element.replaceWith(htmlText);
      },
    };
  });
  </code></pre>
  
  <p>And I'm using the directive like this:</p>
  
  <pre><code> &lt;div class="section-header" section-name="{{currentFeatureName}}"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>The problem is the {{currentFeatureName}} variable from my controller doesn't appear to be defined when the compile function is called on the directive.</p>
  
  <p>One way I've considered to get around this is within the compile function set up an observer function on the sectionName attribute that updates h1 element content when it sees a change.  This seems a little clunky and I was wondering if there is a better or more elegant way of doing this.</p>