title: Angular table directive ng-repeat
body: <p>Hy,</p>
  
  <p>I created a directive for a simple use of tables in my application.
  I'm struggling to get an ng-repeat to work.
  The problem is that my directive  will tell the table from what controller it will get the list with the data for the ng-repeat and this seems not to work, i could use another directive to create an ng-repeat but i don´t want to change the way the developer can use the angular directives.</p>
  
  <p>So if anyone already struggled with this problem please share how you resolve it.</p>
  
  <p>this is the markup.</p>
  
  <pre><code>&lt;body ng-app="List"&gt;
  &lt;div my-table pl-emptytext="No data found!"&gt;
    &lt;table&gt;
      &lt;thead&gt;
        &lt;tr&gt;
          &lt;th pl-sort="Id"&gt; Id &lt;/th&gt;
          &lt;th pl-sort="Name"&gt; Name &lt;/th&gt;
          &lt;th pl-sort="Roles"&gt; Roles &lt;/th&gt;
          &lt;th pl-sort="Claims"&gt; Claims &lt;/th&gt;
        &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
        &lt;tr pl-obj="user"&gt;
          &lt;td&gt;{{user.Id}}&lt;/td&gt;
          &lt;td&gt;{{user.Name}}&lt;/td&gt;
          &lt;td&gt;
            &lt;span ng-repeat="role in user.Roles"&gt;
              {{role.RoleType}}
            &lt;/span&gt;
          &lt;/td&gt;
          &lt;td&gt;
            &lt;span ng-repeat="claim in user.Claims"&gt;
              {{role.ClaimType}}
            &lt;/span&gt;
          &lt;/td&gt;
        &lt;/tr&gt;
      &lt;/tbody&gt;
    &lt;/table&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>This is the directive myTable</p>
  
  <pre><code>angular
  .module('List')
  .directive('myTable', [
    '$compile',
    function($compile) {
      return {
        restriction: 'AE',
        scope: {
          plEmptytext: '@'
        },
        transclude: true,
        replace: true,
        template: '&lt;div class="container-fluid"&gt;' +
          '&lt;div class="row"&gt;' +
          '&lt;div class="col-lg-12"&gt;' +
          '&lt;div class="alert alert-warning" ng-cloak ng-show="ListIsEmpty"&gt;' +
          '{{plEmptytext}}' +
          '&lt;/div&gt;' +
          '&lt;div ng-transclude&gt;&lt;/div&gt;' +
          '&lt;/div&gt;' +
          '&lt;/div&gt;' +
          '&lt;/div&gt;',
        link: function(scope, element) {
          // Do something else, bind events, etc ...
  
          var table = element.find('table');
          $compile(table)(scope);
        }
      };
    }
  ])
  .directive('table', [
    function() {
      return {
        link: function(scope, element, attrs) {
          attrs.$addClass("table");
          attrs.$addClass("table-striped");
        }
      };
    }
  ])
  .directive('thead', [
    function() {
      return {
        link: function(scope, element, attrs) {
        }
      };
    }
  ])
  .directive('th', [
    function() {
      return {
        link: function(scope, element, attrs) {
          if (attrs.plSort) {
            attrs.$set("ngClick", "resort('" + attrs.plSort + "')");
          }
        }
      };
    }
  ])
  .directive('tbody', [
    function() {
      return {
        link: function(scope, element, attrs) {
          attrs.$set("ng-controller", "listCtrl");
  
        }
      };
    }
  ])
  .directive('tr', [
    function() {
      return {
        link: function(scope, element, attrs) {
          if (attrs.plObj) {
            attrs.$set("ngRepeat", attrs.plObj + " in List");
  
          }
        }
      };
    }
  ]);
  </code></pre>
  
  <p>And this is the listCtrl</p>
  
  <pre><code>angular.module('List', [])
  .controller('listCtrl', ['$scope', '$timeout',
    function($scope, $timeout) {
      $timeout(function() {
        $scope.List = [{
          Id: '1',
          Name: 'teste1',
          Roles: [{
            Id: 1,
            RoleType: '1'
          }, {
            Id: 2,
            RoleType: '2'
          }],
          Claims: [{
            Id: 1,
            CalimType: '1'
          }, {
            Id: 2,
            ClaimType: '2'
          }]
        }, {
          Id: '1',
          Name: 'teste1',
          Roles: [{
            Id: 2,
            RoleType: '2'
          }],
          Claims: [{
            Id: 2,
            ClaimType: '2'
          }]
        }];
      }, 1000)
    }
  ]);
  </code></pre>
  
  <p>The problem is when i try to call the ng-repeat on this 2 td it dosen´t work</p>
  
  <pre><code>&lt;td&gt;
    &lt;span ng-repeat="role in user.Roles"&gt;
      {{role.RoleType}}
    &lt;/span&gt;
  &lt;/td&gt;
  &lt;td&gt;
    &lt;span ng-repeat="claim in user.Claims"&gt;
      {{role.ClaimType}}
    &lt;/span&gt;
  &lt;/td&gt;
  </code></pre>
  
  <p>Anyone can point me in the direction of the problem? Already look to different things and different solutions from different people, yet it seems that no one had face my problem.</p>
  
  <p>Best,</p>
  
  <p><a href="https://plnkr.co/edit/Pfw5X8hV7foZxgGspyiu?p=preview" rel="nofollow">Plunker</a></p>