title: Angular Directive table rows issue
body: <p>I am a beginner Angular programmer, but I am really close to understanding the directives.</p>
  
  <p>I create a <a href="http://jsfiddle.net/T7k83/20/" rel="noreferrer">fiddle here</a>, but I have never used fiddle before, and it is not quite rendering ...</p>
  
  <p>the tr-row is a directive.  I am trying to loop through the data, and print a directive (row) per record.
  HTML:
  </p>
  
  <pre><code>&lt;table ng-controller="fiddleCtrl"&gt;
     &lt;thead&gt;
        &lt;th&gt;id&lt;/th&gt;
        &lt;th&gt;name&lt;/th&gt;
        &lt;th&gt;description&lt;/th&gt;
    &lt;/thead&gt;
    &lt;tbody&gt;
      &lt;tr&gt;&lt;tr-row ng-repeat="d in data" scdata="d"&gt;&lt;/tr-row&gt;&lt;/tr&gt;
    &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>javascript:
  </p>
  
  <pre><code>var myapp = angular.module('myApp', [])
  .controller('fiddleCtrl', ['$scope', function ($scope) {
  
  $scope.data = [
       { id: 1, name: 'Fred',   description: 'not the best worker' }, 
       { id: 2, name: 'Wilma',  description: 'Freds Wife'}, 
       { id: 3, name: 'Barney', description: 'Freds best friend'}, 
       { id: 4, name: 'Louise', description: 'Never heard of Fred'}, 
       { id: 5, name: 'Tracy',  description: 'Some Chick'}, 
       { id: 6, name: 'Foo',    description: 'Inventer of bar'}
  ];
  }]).directive('trRow', function ($compile) {
  return {
      restrict: "E",
      replace: true,
      link: function (scope, element, attrs) {
          scope.id = scope.d.id;
          scope.name = scope.d.name;
          scope.desc = scope.d.description;
  
          var tmpl = '&lt;tr  &gt;&lt;td&gt;{{id}}&lt;/td&gt;&lt;td&gt;&lt;strong&gt;{{name}}&lt;/strong&gt;&lt;/td&gt;&lt;td&gt;{{desc}}&lt;/td&gt;&lt;/tr&gt;';
          element.html(tmpl).show();
          //var e =$compile(tmpl)(scope);
          //element.replaceWith(e);
          var e = $compile(element.contents())(scope);
      },
      scope: {
          d: "="
      }
  };
  });
  </code></pre>
  
  <p>should be easy. (le sigh)</p>
  
  <p>any help would be appreciated, I REALLY need to understand this.</p>
  
  <p>What is happening in my code is the tr-row directive has replace the table.  I get a list of them,
  (with a tr INSIDE of a tr-row element but there is no table to display them in.  I know this means I am close, but I cant think of any new combinations to try.</p>
  
  <p>I just need a simple table with rows in it.</p>
  
  <p>I appologise if this has been asked a million times, I seem to be unsure what to search for. I have tried so many things. </p>