title: How to add links in all cells of a table in Angular?
body: <p>I have currently a table made with ng-repeat in Angular. The cells value is set by some variable in scope.</p>
  
  <pre><code>&lt;tbody&gt;
    &lt;tr ng-repeat="item in items" myDirective&gt;
      &lt;td&gt;{{item.title}}&lt;/td&gt;
      &lt;td&gt;{{item.field}}&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/tbody&gt;
  </code></pre>
  
  <p>What I would like to do is to have this in the end :</p>
  
  <pre><code>&lt;tbody&gt;
    &lt;tr ng-repeat="item in items" myDirective&gt;
      &lt;td&gt;&lt;a href="{{item.link}}"&gt;{{item.title}}&lt;/a&gt;&lt;/td&gt;
      &lt;td&gt;&lt;a href="{{item.link}}"&gt;{{item.field}}&lt;/a&gt;&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/tbody&gt;
  </code></pre>
  
  <p>So I created a directive in order to do that but I don't go anywhere with it.
  I tried to get every child of the tr element, then surround the html of the (td) childs by a  tag but it seems that the binding removes the tag and replace it with vanilla item title and field.</p>
  
  <p>Here is my code so far, which is setting the a tag with a status website on the first td tag (title) but can't make it work.</p>
  
  <pre><code>angular.module('myApp')
    .directive('myDirective', function () {
      return {
        restrict: 'A',
        link: function postLink(scope, element, attrs) {
          var cellules = element.children(); // get td elements
          angular.element(cellules[0]).html($compile('&lt;a href="http://website"&gt;' + angular.element(cellules[0]).html() + '&lt;/a&gt;')(scope)); // surround title with a link
        }
      };
    });
  </code></pre>
  
  <p>Thank you !</p>