title: Problems animating ng-repeat directive template with d3
body: <p>I'm trying to make a category list with Angular and D3. I've created a directive for this list and some of the child nodes in my template use ng-repeat because I'd like to have angular build my html instead of d3.</p>
  
  <p>My problem is that when trying to reference the ng-repeated elements with d3, they haven't been created yet. If I use the link function there are no items in the list. If I use the compile function I'm able to see 1 list item, but there should be at least 2.</p>
  
  <p><a href="http://jsfiddle.net/fractalspawn/LcbMf/" rel="nofollow">Seen Here</a></p>
  
  <p>Taken from fiddle:</p>
  
  <pre><code>angular.module('myApp').directive('targetingCategories', function(){
    return {
      restrict: 'E',
      scope: {
        data: '='
      },
      template: '&lt;div&gt;'+
          '&lt;ul class="catList"&gt;'+
            '&lt;li ng-repeat="cat in data.categories"&gt;'+
              '{{cat.name}}'+
              '&lt;ul class="subCatList"&gt;'+
                '&lt;li ng-repeat="subcat in cat.categories"&gt;{{subcat.name}}&lt;/li&gt;'+
              '&lt;/ul&gt;'+
            '&lt;/li&gt;'+
          '&lt;/ul&gt;'+
        '&lt;/div&gt;',
      replace: true,
      compile: function($tEl, $attrs){
  
        // attach d3 on the TEMPLATE element, and look for list items
        var vis = d3.select($tEl[0]);
        var catList = vis.select('.catList');
        var catListFirstItem = vis.select('.catlist&gt;li');
        var catListItems = vis.selectAll('.catList&gt;li');
  
        console.log(catList); // 1 item returned (the ul)
        console.log(catListFirstItem); // 1 item returned (the first li)
        console.log(catListItems); // 1 items returned ??
  
        return function($scope, $el, $attrs){
          // attach d3 to INSTANCE element and look for list items
          var vis = d3.select($el[0]);
          var catList = vis.select('.catList');
          var catListFirstItem = vis.select('.catlist&gt;li');
          var catListItems = vis.selectAll('.catList&gt;li');
  
          console.log(catList); // 1 item returned (the ul)
          console.log(catListFirstItem); // 1 item returned (the first li)
          console.log(catListItems); // 0 items returned ??
        };
  
      }
    };
  });
  </code></pre>
  
  <p>The idea is to have angular build my markup, and d3 animate it. I like the control that d3 gives me versus using CSS animations.</p>
  
  <p>When I used d3 to create my list items this was <a href="http://jsfiddle.net/fractalspawn/4YCR8/" rel="nofollow">working just fine</a>. I'm tempted to do that again, but I think putting the LIs in the template is a better architecture.</p>
  
  <p>I'm thinking that I need to call a compile, or wait for one or something. I'm almost at the limit of my Angular knowledge so any education here is appreciated.</p>