Table Directive

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<div ng-app="app" class="container">
  <div ng-controller="myController as ctrl">
    <my-table data="ctrl.data"></my-table>
  </div>
</div>

CSS

body {
  padding-top:20px;
}

JavaScript

angular
   .module('app', [])
   .controller('myController', myController)
   .directive('myTable',myTable);



function myController($location) {
   var vm = this;
   vm.data = [
      {band:'Name',id:1, status:"Y"},
      {band:'The Pixies',id:2, status:"N"},
      {band:'Beck',id:3},
      {band:'Total',id:1, status:"Y"}
   ];

}

function myTable() {
   var directive = {
      restrict: 'E',
      template: '<table class="table"><tr ng-repeat="d in data"><td>{{d.band}}</td><td>{{d.id}}</td><td>{{d.id}}</td></tr></table>',
      scope: {
         data: '='
      }
   };

   return directive;
}