dynamic angular table

updated the previous one, this now will change the table size depending on what is in the json and does not need to be hardcoded anymore. only issue is that the columns are now out of order, they are ordered by header name for some reason

by Taylor Funk

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.1.1/css/bootstrap.no-icons.min.css">
<script src="http://code.angularjs.org/1.1.0/angular.min.js"></script>
<link rel="stylesheet" href=" https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.2/css/font-awesome.css">
       
        <div ng-controller="ctrlRead">
           
            
            <table class="table table-striped table-condensed table-hover">
                <thead>

                    <tr>
                        <th class="{{header}}" ng-repeat="(header, value) in items[0]" ng-click="changeSorting(header)">
                       
                            {{header}}
      <i ng-class="selectedCls2(header)"></i>
                    </tr>
                </thead>
                <tfoot>
                    <td colspan="6">
                        <div class="pagination pull-right">
                            <ul>
                                <li ng-class="{disabled: currentPage == 0}">
                                    <a href ng-click="prevPage()">« Prev</a>
                                </li>
                            
                                <li ng-repeat="n in range(pagedItems.length, currentPage, currentPage + gap) "
                                    ng-class="{active: n == currentPage}"
                                ng-click="setPage()">
                                    <a href ng-bind="n + 1">1</a>
                                </li>
                             
                                <li ng-class="{disabled: (currentPage) == pagedItems.length - 1}">
                                    <a href ng-click="nextPage()">Next »</a>
                                </li>
                            </ul>
                        </div>
                    </td>
                </tfoot>
                <pre>pagedItems.length: {{pagedItems.length|json}}</pre>
                <pre>currentPage: {{currentPage|json}}</pre>
       ...

JavaScript

var fessmodule = angular.module('myModule', []);

fessmodule.controller('ctrlRead', function ($scope, $filter) {

    // init
    $scope.sort = {       
                sortingOrder : 'id',
                reverse : false
            };
    
    $scope.gap = 5;
    
    $scope.filteredItems = [];
    $scope.groupedItems = [];
    $scope.itemsPerPage = 5;
    $scope.pagedItems = [];
    $scope.currentPage = 0;
    $scope.items = [
        {"id":1,"name":"name 1","description":"description 1","field3":"field3 1","field4":"field4 1","field5":"field5 1"}, 
        {"id":2,"name":"name 2","description":"description 1","field3":"field3 2","field4":"field4 2","field5":"field5 2"}, 
        {"id":3,"name":"name 3","description":"description 1","field3":"field3 3","field4":"field4 3","field5":"field5 3"}, 
        {"id":4,"name":"name 4","description":"description 1","field3":"field3 4","field4":"field4 4","field5":"field5 4"}, 
        {"id":5,"name":"name 5","description":"description 1","field3":"field3 5","field4":"field4 5","field5":"field5 5"}, 
        {"id":6,"name":"name 6","description":"description 1","field3":"field3 6","field4":"field4 6","field5":"field5 6"}, 
        {"id":7,"name":"name 7","description":"description 1","field3":"field3 7","field4":"field4 7","field5":"field5 7"}, 
        {"id":8,"name":"name 8","description":"description 1","field3":"field3 8","field4":"field4 8","field5":"field5 8"}, 
        {"id":9,"name":"name 9","description":"description 1","field3":"field3 9","field4":"field4 9","field5":"field5 9"}, 
        {"id":10,"name":"name 10","description":"description 1","field3":"field3 10","field4":"field4 10","field5":"field5 10"}, 
        {"id":11,"name":"name 11","description":"description 1","field3":"field3 11","field4":"field4 11","field5":"field5 11"}, 
        {"id":12,"name":"name 12","description":"description 1","field3":"field3 12","field4":"field4 12","field5":"field5 12"}, 
        {"id":13,"name":"name...