How to fixed header after scrolling in angular js

Suppose you have a large number of data in your listing and when you are going to scroll up into the listing then you list heading is move up and you didn't showing it and sometime its a complicated to determine that which column data is specify which column heading. To solve this problem you can do to freeze the heading at specific point (like top of the screen) when listing scroll up. To solve this problem in angular js here is a very simple directive you can use-

Below is the directive :

.directive('fixedTableHeaders', ['$timeout', function fixedTableHeaders($timeout) {

    return {

        restrict: 'A',

        link: function(scope, element, attrs){

   $timeout(function () {

     element.stickyTableHeaders();

   }, 0);

  }

    };

}]);

How to use : You have to call the above directive in your main div or table like below -

This is my html code of listing :

<table ng-table="tableParams" class="table table-striped table-bordered"  data-fixed-table-headers>

 <tr ng-repeat="user in $data">

  <td data-title="'Name'" data-sortable="'first_name'">{{user.first_name}} {{user.last_name}}</td>

  <td data-title="'Phone'" data-sortable="'private_phone'">{{user.private_phone}}</td>

  <td data-title="'Email'" data-sortable="'email'">{{user.email}}</td>

  <td data-title="'Designation'" data-sortable="'designation'"><div ng-repeat="(key, value) in desig" ng-if="key==user.designation">{{value}}</div></td>

  <td data-title="'Type'" data-sortable="'user_type'">{{(user.user_type ==3) ? "Employee" : (user.user_type ==2) ? "Employer" : "Lender"}}</td>

  <td data-title="'Status'" data-sortable="'status'">{{(user.status ==1) ? "Active" : "Inactive"}}</td>

  <td class="td-actions">

   <a class="btn-small" href="/#/admin/setting/users/edituser/{{user._id}}"><img src="../../../images/editicon.png" /></a>

   <a class="btn-small" ng-click="deleteUser(user._id, user.company_id,user.designation,user.user_type)"><img src="../../../images/cuticon.png" /></a>

  </td>

 </tr>

</table>

Output :

If you having problem while using this code so please leave a comment i will defenatily reply you back.

Chears
Happy coding :)