title: AngularJS + highlight.js (to evaluate string with expression in directive)
body: <p>I am trying to create a highlight.js directive and I am having problems getting scope vars to apply.</p>
  
  <pre><code>&lt;script src="http://code.jquery.com/jquery-1.8.2.min.js" &gt;&lt;/script&gt;
  &lt;link rel="stylesheet" href="http://yandex.st/highlightjs/7.3/styles/default.min.css"&gt;
  &lt;script src="http://yandex.st/highlightjs/7.3/highlight.min.js"&gt;&lt;/script&gt;
  
  &lt;div ng-app="app"&gt;
      &lt;div ng-controller="MyCtrl"&gt;
          &lt;snippet&gt;&amp;lt;script src=&amp;quot;{{src}}&amp;quot;&amp;gt;&amp;lt;/script&amp;gt;&lt;/snippet&gt;
          {{src}}
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>​</p>
  
  <pre><code>function MyCtrl($scope) {
    $scope.src = "foo.js";   
  }
  
  app.directive('snippet', ['$timeout', function($timeout) {
      var template = '&lt;pre&gt;&lt;code&gt;&lt;/code&gt;&lt;/pre&gt;';
  
      return {
          restrict: 'E',
          compile: function(tElement, tAttrs, transclude) {
  
              var rawCode = tElement.text();
              tElement.html(template);
  
              return function(scope, element, attrs) {
                  $timeout(function() {
                      scope.$apply(function() {
                          var formattedCode = hljs.highlightAuto(rawCode);
                          $(element).find('code').html(formattedCode.value);
                      });
                  }, 0);
              }
          }
      }
  }]);​
  </code></pre>
  
  <p>Here is the fiddle: <a href="http://jsfiddle.net/dkrotts/RE7Jj/5/" rel="noreferrer">http://jsfiddle.net/dkrotts/RE7Jj/5/</a></p>
  
  <p>As you can see, $scope.src is not applying its value inside the snippet. What am I doing wrong?</p>