title: Directive inside table is rendered outside table
body: <p>I have a directive with isolated scope like this:</p>
  
  <pre><code>.directive('hello', function() {
  
      return {
        restrict: 'E',
        replace: true,
        template: '&lt;h1&gt;Hello Directive&lt;/h1&gt;',
        scope: {}
      };
  
  });
  </code></pre>
  
  <p>If I put that directive inside a table, weirdly enough, the directive is rendered outside the table, even when used as an attribute:</p>
  
  <pre><code>&lt;table&gt;    
    &lt;tr&gt;
      &lt;hello&gt;&lt;/hello&gt;
  
      &lt;td&gt;Cell 1&lt;/td&gt;             
      &lt;td&gt;Cell 2&lt;/td&gt;             
      &lt;td&gt;Cell 3&lt;/td&gt;             
    &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p><img src="https://i.stack.imgur.com/Ic990.png" alt="enter image description here"></p>
  
  <p>Any workarounds?</p>
  
  <p>I created a Codepen to demonstrate this: <a href="http://codepen.io/jviotti/pen/AtnzJ/" rel="nofollow noreferrer">http://codepen.io/jviotti/pen/AtnzJ/</a>.</p>
  
  <p><strong>EDIT:</strong> I tried wrapping the <code>h1</code> in a <code>td</code>. It still renders outside the table:</p>
  
  <p><img src="https://i.stack.imgur.com/e9DLz.png" alt="enter image description here"></p>