title: AngularJS directive scope and $compile - variable returning blank
body: <p>Having a little issue with angular that I can't figure out. I suspect it may have something to do with scope, but I'm not 100% exactly what.</p>
  
  <p><strong>Here's my HTML:</strong></p>
  
  <pre><code>&lt;i class="icon-question-sign" popover data-placement="top" data-trigger="hover" data-title="Top 10 clients" data-content-compile="&lt;ul&gt;&lt;li ng-repeat='client in user.clients | limitTo: 10'&gt;{{client}}&lt;/li&gt;&lt;/ul&gt;"&gt;&lt;/i&gt;
  </code></pre>
  
  <p><strong>Here's my directive:</strong></p>
  
  <pre><code>app.directive('popover', function($timeout, $compile) {
  var linker = function (scope, element, attrs) {
      $timeout(function() {
          var content = $compile(element.data('content-compile'))(scope);
          element.popover({
              'html': true,
              'content': content
          });
      }, 200);
  }
  
  return {
      restrict: 'A',
      link: linker
  }
  
  });
  </code></pre>
  
  <p>The result correctly repeats li's to the correct length of {{user.clients}} but doesn't render {{client}}. For some reason, that comes through as blank, yet, it has a string value and works when added directly to the HTML and not compiled through the directive. How it currently looks in the DOM:</p>
  
  <pre><code>&lt;ul class="ng-scope"&gt;&lt;!-- ngRepeat: client in user.clients | limitTo: 10 --&gt;&lt;li ng-repeat="client in user.clients | limitTo: 10" class="ng-scope"&gt;&lt;/li&gt;&lt;li ng-repeat="client in user.clients | limitTo: 10" class="ng-scope"&gt;&lt;/li&gt;&lt;li ng-repeat="client in user.clients | limitTo: 10" class="ng-scope"&gt;&lt;/li&gt;&lt;li ng-repeat="client in user.clients | limitTo: 10" class="ng-scope"&gt;&lt;/li&gt;&lt;li ng-repeat="client in user.clients | limitTo: 10" class="ng-scope"&gt;&lt;/li&gt;&lt;li ng-repeat="client in user.clients | limitTo: 10" class="ng-scope"&gt;&lt;/li&gt;&lt;li ng-repeat="client in user.clients | limitTo: 10" class="ng-scope"&gt;&lt;/li&gt;&lt;li ng-repeat="client in user.clients | limitTo: 10" class="ng-scope"&gt;&lt;/li&gt;&lt;li ng-repeat="client in user.clients | limitTo: 10" class="ng-scope"&gt;&lt;/li&gt;&lt;li ng-repeat="client in user.clients | limitTo: 10" class="ng-scope"&gt;&lt;/li&gt;&lt;/ul&gt;
  </code></pre>
  
  <p>If I replace {{client}} with say {{user.email}} it lists correctly.</p>
  
  <p>Not sure what's up here - I'm probably missing something obvious!</p>