title: Creating a table directive in AngularJS
body: <p>So I'm kind of new to AngularJS but I'm trying to create a simple table directive however I can't quite figure out what's the best way of doing it. </p>
  
  <p>This is what I've got for the directive file:</p>
  
  <pre><code>'use strict';
  
  angular.module('hantera')
  
  .directive('bsGrid', function($http) {
      return {
          restrict: 'E',
          templateUrl:'views/bsGrid.html',
          replace: true, 
          scope: {
              data: '='
          }
      };
  });
  </code></pre>
  
  <p>And this is my template file:</p>
  
  <pre><code>&lt;table class="table table-striped table-hover" cellspacing="0"&gt;
      &lt;thead&gt;
          &lt;tr&gt;
              &lt;th ng-repeat="(key, value) in data"&gt;{{key}}&lt;/th&gt;
          &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
          &lt;tr ng-repeat="row in data"&gt;
              &lt;td ng-repeat="cell in row"&gt;
                  {{cell}}
              &lt;/td&gt;
          &lt;/tr&gt;
      &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>