<!DOCTYPE html>
<html>

  <head>
    <script data-require="angular.js@*" data-semver="1.2.0-rc3-nonmin" src="http://code.angularjs.org/1.2.0-rc.3/angular.js"></script>
    <script data-require="ng-table@*" data-semver="0.3.1" src="http://bazalt-cms.com/assets/ng-table/0.3.1/ng-table.js"></script>
    <script data-require="ng-table-export@0.1.0" data-semver="0.1.0" src="http://bazalt-cms.com/assets/ng-table-export/0.1.0/ng-table-export.js"></script>
    
    <link data-require="ng-table@*" data-semver="0.3.0" rel="stylesheet" href="http://bazalt-cms.com/assets/ng-table/0.3.0/ng-table.css" />
    <link data-require="bootstrap-css@*" data-semver="3.0.0" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />
    
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-app="main" ng-controller="DemoCtrl">
  
    <div class="row">
        <div class="col col-sm-6">
            <h2>Table #1</h2>
            <p><strong>Filter:</strong> {{tableParams.filter()|json}}

            <table ng-table="tableParams" show-filter="true" class="table">
                <tr ng-repeat="user in $data">
                    <td data-title="'Name'" filter="{ 'name': 'text' }">
                        {{user.name}}
                    </td>
                    <td data-title="'Age'">
                        {{user.age}}
                    </td>
                </tr>
            </table>
        </div>
        <div class="col col-sm-6">
            <h2>Table #2</h2>
            <p><strong>Filter:</strong> {{tableParams2.filter()|json}}

            <table ng-table="tableParams2" show-filter="true" class="table">
                <tr ng-repeat="user in $data">
                    <td data-title="'Name'" filter="{ 'name': 'text' }">
                        {{user.name}}
                    </td>
                    <td data-title="'Age'">
                        {{user.age}}
                    </td>
                </tr>
            </table>
        </div>
    </div>
  </body>

</html>
var app = angular.module('main', ['ngTable'])
        .controller('DemoCtrl', function($scope, ngTableParams, $filter) {
            var data = [{name: "Moroni", age: 50},
                {name: "Tiancum", age: 43},
                {name: "Jacob", age: 27},
                {name: "Nephi", age: 29},
                {name: "Enos", age: 34},
                {name: "Tiancum", age: 43},
                {name: "Jacob", age: 27},
                {name: "Nephi", age: 29},
                {name: "Enos", age: 34},
                {name: "Tiancum", age: 43},
                {name: "Jacob", age: 27},
                {name: "Nephi", age: 29},
                {name: "Enos", age: 34},
                {name: "Tiancum", age: 43},
                {name: "Jacob", age: 27},
                {name: "Nephi", age: 29},
                {name: "Enos", age: 34}];

            // params for table #1
            $scope.tableParams = new ngTableParams({
                page: 1,            // show first page
                count: 10           // count per page
            }, {
                total: data.length, // length of data
                getData: function($defer, params) {
                    // use build-in angular filter
                    var orderedData = params.sorting() ?
                            $filter('orderBy')(data, params.orderBy()) :
                            data;
                    orderedData = params.filter() ?
                            $filter('filter')(orderedData, params.filter()) :
                            orderedData;

                    params.total(orderedData.length);
                    $defer.resolve(orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count()));
                }
            });

            // params for table #2
            $scope.tableParams2 = new ngTableParams({
                page: 1,            // show first page
                count: 10           // count per page
            }, {
                total: data.length, // length of data
                getData: function($defer, params) {
                    // use build-in angular filter
                    var orderedData = params.sorting() ?
                            $filter('orderBy')(data, params.orderBy()) :
                            data;
                    orderedData = params.filter() ?
                            $filter('filter')(orderedData, params.filter()) :
                            orderedData;

                    params.total(orderedData.length);
                    $defer.resolve(orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count()));
                }
            });
        });
body {
    padding: 10px !important;   
}

.ng-table {
    border: 1px solid #000;
}