title: Table row as directive displays out of table context in angularjs
body: <p>I have a table and each row is to displayed using a directive and ng-repeat. </p>
  
  <p>Unfortunately, the rows are rendered out of the table context.</p>
  
  <p>Please run the fiddle here: <a href="http://jsfiddle.net/nu1tu9qL/4/" rel="nofollow">http://jsfiddle.net/nu1tu9qL/4/</a></p>
  
  <p>The directive:</p>
  
  <pre><code>.directive('myrow', [function () {
          return {
              restrict: 'E',
              replace: true,
              scope: {
                  rowdata: "="
              },
              template: '&lt;tr&gt;&lt;td&gt;{{rowdata.a}}&lt;/td&gt;&lt;td&gt;{{rowdata.b}}&lt;/td&gt;&lt;/tr&gt;',
          };
      }]);
  </code></pre>
  
  <p>The HTML:</p>
  
  <pre><code>&lt;table&gt;
      &lt;thead&gt;
          &lt;th&gt;A&lt;/th&gt;
          &lt;th&gt;B&lt;/th&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
          &lt;myrow ng-repeat="d in data" rowdata="d"&gt;&lt;/row&gt;
      &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>