title: An AngularJS directive is not being rendered in the DOM hierarchy in which it is declared
body: <p>I have a table in which I'm rendering some <code>&lt;tr&gt;</code> tags and within my own custom directive.</p>
  
  <p>For some reason the <code>&lt;tr&gt;</code> tags are rendering outside of the hierarchy in which they are declared.</p>
  
  <p>In this image you can see that the nodes are rendered outside of the table.</p>
  
  <p><a href="https://i.stack.imgur.com/Nm5e5.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Nm5e5.png" alt="Shows DOM node being rendered outside of where it is declared"></a></p>
  
  <p>If you take a look at this Plunk in the file rule-list.html, you'll see there's a comment on where I expect the tag should be rendering but it isn't.</p>
  
  <p><a href="http://goo.gl/9STCKP" rel="nofollow noreferrer">http://goo.gl/9STCKP</a></p>
  
  <p>Sorry for linking to a plunk but it's not a code fragment which I can post which shows the problem. I don't know where the problem is :)</p>