title: Angular table row directive not rendering inside table
body: <p>I am trying to add a row "isrcrow" directive to a table as follows:</p>
  
  <pre><code>&lt;table class="table"&gt;
          &lt;thead&gt;&lt;tr&gt;
                     &lt;th&gt;Artist Name&lt;/th&gt;
                     &lt;th&gt;Track Title&lt;/th&gt;
                     &lt;th&gt;Version&lt;/th&gt;
                     &lt;th&gt;Track Duration&lt;/th&gt;
                     &lt;th&gt;Recording Year&lt;/th&gt;
                     &lt;th&gt;&lt;/th&gt;
                 &lt;/tr&gt;
          &lt;/thead&gt;
          &lt;tbody&gt;
              &lt;isrcrow&gt;&lt;/isrcrow&gt;
          &lt;/tbody&gt;       
  
      &lt;/table&gt;
  </code></pre>
  
  <p>Here is the directive:</p>
  
  <pre><code>(function() {
    var isrcorderapp;
  
    isrcorderapp = angular.module("isrcorderapp", []);
  
    isrcorderapp.controller("isrcordercontroller", function($scope, $http) {
      return $scope.recordingTypes = [
        {
          type: 'Single'
        }, {
          type: 'Album'
        }, {
          type: 'Live'
        }, {
          type: 'Concert'
        }, {
          type: 'Instrumental'
        }
      ];
    });
  
    isrcorderapp.directive("isrcrow", function() {
      return {
        restrict: 'E',
        template: '&lt;tr&gt;\
                  &lt;td&gt;&lt;input id="artist" ng-model="name"/&gt;&lt;/td&gt;\
                  &lt;td&gt;&lt;input id="track"/&gt;&lt;/td&gt;\
                  &lt;td&gt;&lt;select id="isrctype" ng-model="isrctype" ng-change="setState(state)" ng-options="s.type for s in recordingTypes" class="ng-pristine ng-valid"&gt;&lt;/select&gt;&lt;/td&gt;\
                  &lt;td&gt;&lt;input id="duration"/&gt;&lt;/td&gt;\
                  &lt;td&gt;&lt;input id="year"/&gt;&lt;/td&gt;\
                  &lt;td&gt;&lt;input type="button" value="Add ISRC" onclick="AddIsrc()" class="btn btn-small btn-success" /&gt;\
                      &lt;input type="button" value="Delete" onclick="RemoveIsrc()" class="btn btn-small btn-danger" /&gt;\
                  &lt;/td&gt;\
              &lt;/tr&gt;',
        scope: {
          name: '='
        },
        link: function(scope, element, attr) {}
      };
    });
  
  }).call(this);
  </code></pre>
  
  <p>The problem I am experincing is the isrcrow directive doesnt render inside the table body. Its rendered outside and above the table:</p>
  
  <p>Does anyone knows what could be causing this behaviour?</p>