title: Get an element in DOM hierarchy from the link function of a directive [AngularJS]
body: <p>I have a simple DOM hierarchy and I want to grab a specific set of elements (I want all the <strong>canvas</strong> elements). This is the entire template for this directive:</p>
  
  <pre><code>&lt;div id='charts-container'&gt;
      &lt;div class='chart-wrapper' ng-repeat='chart in getNumberOfCharts() track by $index'&gt;
          &lt;canvas id="{{'exam-chart-' + $index}}" class='chart-canvas'&gt;&lt;/canvas&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I want to create a list with all the canvas within the <em>#charts-container</em> element, but I just can't. This is what I'm trying to do inside the link function:</p>
  
  <pre><code>link: function (scope, element, attributes, controller) {
      var look = element.find('#chart-canvas');
      $log.debug(look);
  }
  </code></pre>
  
  <p>And then I get <a href="http://i.imgur.com/0Ejlk8d.png" rel="nofollow">this</a> element, but I don't know how to get all the chart-wrapper elements from here.</p>
  
  <p>I tried doing <code>look.context.children</code>, it returned an empty list, but at the same time showed me what I wanted as if the list were populated, here is an <a href="http://i.imgur.com/dWqxVLP.png" rel="nofollow">image</a>. If I try to access any index of this list, it returns undefined (which is fine, because it's an empty list. But why the console is showing me these values?)</p>
  
  <p>What is the best way to achieve this? To get all the canvas elements in this template? (there are 15 of them). Thanks!</p>
  
  <hr>
  
  <p><strong>--- UPDATE ---</strong> </p>
  
  <p>I realized that if I remove the <strong>ng-repeat</strong> attribute I'm using in the template, it works! But I need the ng-repeat...</p>
  
  <p><code>element.find('.chart-canvas')</code> manage to get the canvas element, but only if there are no ng-repeat attribute.</p>
  
  <p>Is this a common issue when using ng-repeat. Is there any special treatment when falling in this case?</p>