title: Iterate over angular custom directive's children
body: <p>I had the following list before:</p>
  
  <pre><code>&lt;ul id="#expenses"&gt;
      &lt;li&gt;&lt;/li&gt;
      ...
  &lt;/ul&gt;
  </code></pre>
  
  <p>And I could reach the object as</p>
  
  <pre><code>var expenses = angular.element('#expenses')
  </code></pre>
  
  <p>Then, since an HTML list has children, I could iterate over it as</p>
  
  <pre><code>angular.forEach(expenses.children('li'), function(...))
  </code></pre>
  
  <p>However, I had to place a custom tag inside this list and my HTML became:</p>
  
  <pre><code>&lt;ul id="#expenses"&gt;
      &lt;submenu&gt;
          &lt;li&gt;&lt;/li&gt;
          ...
      &lt;/submenu&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>Now I can reach the list as:</p>
  
  <pre><code>var expenses = document.querySelector('#expenses &gt; submenu')
  </code></pre>
  
  <p>However, children() function does not work. Console says that expenses.children('li') is not a function. In this case, how can I iterate over <code>&lt;li&gt;</code> tags inside a custom <code>&lt;submenu&gt;</code> tag?</p>