html - Angular Headers Fixed -

i trying make table on angular page fixed headers , footers.

<table class="table table-bordered table-striped table-hover" fixed-header>   <thead>       <tr>           <th>name</th>           <th>amount</th>           <th>id</th>       </tr>   </thead>   <tbody>       <tr class="info" ng-repeat="item in ctrl.items track $index">           <td>               <input type="checkbox"/>               <a>{{item.displayname}}</a>           </td>           <td>               {{item.marketvalue}}           </td>           <td>               {{item.positions}}           </td>       </tr>   </tbody>   <tfoot>       <tr>           <td>name</td>           <td>amount</td>           <td>id</td>       </tr>   </tfoot> </table> 

i have demo of angular table here on plunker. i'm using angu-fixed-header-table plugin table refuses have fixed headers. ideas on how fix it?

i think missing add table-height="". here working demo. https://plnkr.co/edit/bdiqzyxvypdfxu9ti44t?p=preview

/**   * angularjs fixed header scrollable table directive   * @author jason watmore <jason@pointblankdevelopment.com.au> (http://jasonwatmore.com)   * @version 1.2.0   */  (function () {      angular          .module('angufixedheadertable', [])          .directive('fixedheader', fixedheader);        fixedheader.$inject = ['$timeout'];        function fixedheader($timeout) {          return {              restrict: 'a',              link: link          };            function link($scope, $elem, $attrs, $ctrl) {              var elem = $elem[0];                // wait data load , transform table              $scope.$watch(tabledataloaded, function(istabledataloaded) {                  if (istabledataloaded) {                      transformtable();                  }              });                function tabledataloaded() {                  // first cell in tbody exists when data loaded doesn't have width                  // until after table transformed                  var firstcell = elem.queryselector('tbody tr:first-child td:first-child');                  return firstcell && !firstcell.style.width;              }                function transformtable() {                  // reset display styles column widths correct when measured below                  angular.element(elem.queryselectorall('thead, tbody, tfoot')).css('display', '');                    // wrap in $timeout give table chance finish rendering                  $timeout(function () {                      // set widths of columns                      angular.foreach(elem.queryselectorall('tr:first-child th'), function (thelem, i) {                            var tdelems = elem.queryselector('tbody tr:first-child td:nth-child(' + (i + 1) + ')');                          var tfelems = elem.queryselector('tfoot tr:first-child td:nth-child(' + (i + 1) + ')');                            var columnwidth = tdelems ? tdelems.offsetwidth : thelem.offsetwidth;                          if (tdelems) {                              tdelems.style.width = columnwidth + 'px';                          }                          if (thelem) {                              thelem.style.width = columnwidth + 'px';                          }                          if (tfelems) {                              tfelems.style.width = columnwidth + 'px';                          }                      });                        // set css styles on thead , tbody                      angular.element(elem.queryselectorall('thead, tfoot')).css('display', 'block');                        angular.element(elem.queryselectorall('tbody')).css({                          'display': 'block',                          'height': $attrs.tableheight || 'inherit',                          'overflow': 'auto'                      });                        // reduce width of last column width of scrollbar                      var tbody = elem.queryselector('tbody');                      var scrollbarwidth = tbody.offsetwidth - tbody.clientwidth;                      if (scrollbarwidth > 0) {                          // reason trimming width 2px lines better                          scrollbarwidth -= 2;                          var lastcolumn = elem.queryselector('tbody tr:first-child td:last-child');                          lastcolumn.style.width = (lastcolumn.offsetwidth - scrollbarwidth) + 'px';                      }                  });              }          }      }  })();    var app = angular.module('myapp', ['angufixedheadertable'])  .controller('democontroller', function($scope) {      $scope.products = [        {          displayname: 'prod1',          marketvalue: '100',          positions:'1'        },        {          displayname: 'prod1',          marketvalue: '100',          positions:'1'        },        {          displayname: 'prod1',          marketvalue: '100',          positions:'1'        },        {          displayname: 'prod1',          marketvalue: '100',          positions:'1'        },        {          displayname: 'prod1',          marketvalue: '100',          positions:'1'        },        {          displayname: 'prod1',          marketvalue: '100',          positions:'1'        },        {          displayname: 'prod1',          marketvalue: '100',          positions:'1'        },        {          displayname: 'prod1',          marketvalue: '100',          positions:'1'        },        {          displayname: 'prod1',          marketvalue: '100',          positions:'1'        },        {          displayname: 'prod1',          marketvalue: '100',          positions:'1'        },        {          displayname: 'prod1',          marketvalue: '100',          positions:'1'        },        {          displayname: 'prod1',          marketvalue: '100',          positions:'1'        },        {          displayname: 'prod1',          marketvalue: '100',          positions:'1'        },        {          displayname: 'prod1',          marketvalue: '100',          positions:'1'        },      ];  });

<!doctype html>  <html ng-app="myapp">      <head>      <meta charset="utf-8" />      <title>angularjs plunker</title>      <script>document.write('<base href="' + document.location + '" />');</script>      <link rel="stylesheet" href="style.css" />      <script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.9/angular.js" data-semver="1.4.9"></script>      <script src="app.js"></script>    </head>      <body ng-controller="democontroller">  <table table-height="100px" class="table table-bordered table-striped table-hover" fixed-header>    <thead>        <tr>            <th>name</th>            <th>amount</th>            <th>id</th>        </tr>    </thead>    <tbody>        <tr class="info" ng-repeat="item in products track $index">            <td>                <input type="checkbox"/>                <a>{{item.displayname}}</a>            </td>            <td>                {{item.marketvalue}}            </td>            <td>                {{item.positions}}            </td>        </tr>    </tbody>    <tfoot>        <tr>            <td>name</td>            <td>amount</td>            <td>id</td>        </tr>    </tfoot>  </table>    </body>    </html>