title: Adding a table row after last row created with ng-repeat not working
body: <p>The following does not add a table row but just adds a label into the table. Any ideas why?</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div ng-app='app' ng-controller="Ctrl"&gt;
      &lt;table&gt;
          &lt;tbody&gt;
              &lt;tr ng-repeat="row in rows" create-table&gt;
                  &lt;td nowrap ng-repeat="value in row"&gt;{{value}}&lt;/td&gt;
              &lt;/tr&gt;
          &lt;/tbody&gt;
      &lt;/table&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>JavaScript:</p>
  
  <pre><code>var app = angular.module('app', [], function () {
  })
  
  app.controller('Ctrl', function ($scope) {
      $scope.rows = [{
          title: 'One'
      }]
  })
  
  app.directive('createTable', function () {
      return function(scope, element, attrs) {
          if (scope.$last){
              // console.log(element[0]); - table row
              angular.element(element[0]).after(
                  "&lt;tr&gt;&lt;td&gt;&lt;label&gt;Two&lt;/label&gt;&lt;/td&gt;&lt;/tr&gt;"
              );
          }
      };
  });
  </code></pre>
  
  <p><a href="http://jsfiddle.net/K9ENF/27/" rel="nofollow noreferrer">JSFiddle</a></p>
  
  <p>If you inspect the table element you will see this:
  <img src="https://i.stack.imgur.com/k08bZ.png" alt="enter image description here"></p>