From e60dabaa3652ea1b2aeebbb00bf3826006ca4664 Mon Sep 17 00:00:00 2001
From: skozlov <sergey.kozlovich@landsend.com>
Date: Thu, 9 Mar 2017 14:29:56 +0300
Subject: [PATCH 01/39] Fixed problem when grid-item contains directive with
 ng-transclude in template.

---
 demo/100k/index.html                     | 12 ++++----
 demo/bootstrap/index.html                | 12 ++++----
 demo/bootstrap/js/serverPaginationApp.js |  8 +++---
 demo/bootstrap/multiple.html             | 12 ++++----
 demo/bootstrap/server-pagination.html    | 10 +++----
 demo/material/index.html                 |  8 +++---
 dist/dataGrid.js                         | 36 +++++++++++++-----------
 dist/dataGrid.min.js                     |  2 +-
 src/js/dataGrid.js                       | 36 +++++++++++++-----------
 9 files changed, 70 insertions(+), 66 deletions(-)

diff --git a/demo/100k/index.html b/demo/100k/index.html
index d16ea35..4ce1f28 100644
--- a/demo/100k/index.html
+++ b/demo/100k/index.html
@@ -207,14 +207,14 @@ <h3>Angular Data Grid 100k Example</h3>
 </div>
 </body>
 <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
-<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
-<script src="https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.14.3.js"></script>
-<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
-<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
-<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
+<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
+<script src="https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.js"></script>
+<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-animate.min.js"></script>
+<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-aria.min.js"></script>
+<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-messages.min.js"></script>
 <script type='text/javascript' src='//cdnjs.cloudflare.com/ajax/libs/angular-loading-bar/0.7.1/loading-bar.min.js'></script>
 <script src="../../dist/pagination.min.js"></script>
-<script src="../../dist/dataGrid.js"></script>
+<script src="../../dist/dataGrid.min.js"></script>
 <script src="js/demoApp.js"></script>
 
 </html>
\ No newline at end of file
diff --git a/demo/bootstrap/index.html b/demo/bootstrap/index.html
index 90b9860..8329619 100644
--- a/demo/bootstrap/index.html
+++ b/demo/bootstrap/index.html
@@ -16,7 +16,7 @@
             <button id="single-button" type="button" class="btn btn-info" uib-dropdown-toggle>
                 Change Theme <span class="caret"></span>
             </button>
-            <ul class="uib-dropdown-menu" aria-labelledby="simple-dropdown">
+            <ul class="dropdown-menu" aria-labelledby="simple-dropdown">
                 <li>
                     <a href="index.html"><strong>Bootstrap Design</strong></a>
                 </li>
@@ -227,11 +227,11 @@ <h4>Additional Demos</h4>
 </div>
 </body>
 <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
-<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
-<script src="https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.14.3.js"></script>
-<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
-<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
-<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
+<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
+<script src="https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.js"></script>
+<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-animate.min.js"></script>
+<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-aria.min.js"></script>
+<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-messages.min.js"></script>
 <script src="../../dist/pagination.min.js"></script>
 <script src="../../dist/dataGrid.min.js"></script>
 <script src="js/demoApp.js"></script>
diff --git a/demo/bootstrap/js/serverPaginationApp.js b/demo/bootstrap/js/serverPaginationApp.js
index c175e45..5a207d6 100644
--- a/demo/bootstrap/js/serverPaginationApp.js
+++ b/demo/bootstrap/js/serverPaginationApp.js
@@ -21,8 +21,8 @@
         };
         $scope.UI = {};
         $scope.gridActions = {};
-        myAppFactory.getStatuses().success(function (resp) {
-            $scope.UI.statusOptions = resp;
+        myAppFactory.getStatuses().then(function (resp) {
+            $scope.UI.statusOptions = resp.data;
         });
     }
 
@@ -34,8 +34,8 @@
         };
 
         function getOrdersData(params, callback) {
-            $http.get(herokuDomain + '/orders' + params).success(function (response) {
-                callback(response.orders, response.ordersCount);
+            $http.get(herokuDomain + '/orders' + params).then(function (response) {
+                callback(response.data.orders, response.data.ordersCount);
             });
         }
 
diff --git a/demo/bootstrap/multiple.html b/demo/bootstrap/multiple.html
index d313957..8ff7365 100644
--- a/demo/bootstrap/multiple.html
+++ b/demo/bootstrap/multiple.html
@@ -221,13 +221,13 @@ <h2>Second Grid</h2>
 </div>
 </body>
 <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
-<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
-<script src="https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.14.3.js"></script>
-<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
-<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
-<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
+<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
+<script src="https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.js"></script>
+<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-animate.min.js"></script>
+<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-aria.min.js"></script>
+<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-messages.min.js"></script>
 <script src="../../dist/pagination.min.js"></script>
-<script src="../../dist/dataGrid.js"></script>
+<script src="../../dist/dataGrid.min.js"></script>
 <script src="js/multipleApp.js"></script>
 
 </html>
\ No newline at end of file
diff --git a/demo/bootstrap/server-pagination.html b/demo/bootstrap/server-pagination.html
index c3d5b73..50990cb 100644
--- a/demo/bootstrap/server-pagination.html
+++ b/demo/bootstrap/server-pagination.html
@@ -211,11 +211,11 @@ <h3>Angular Data Grid Server Pagination</h3>
 </body>
 
 <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script><!-- load jquery -->
-<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
-<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
-<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
-<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
-<script src="https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.14.3.js"></script>
+<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
+<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-animate.min.js"></script>
+<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-aria.min.js"></script>
+<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-messages.min.js"></script>
+<script src="https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.js"></script>
 
 <script src="../../dist/pagination.min.js"></script>
 <script src="../../dist/dataGrid.min.js"></script>
diff --git a/demo/material/index.html b/demo/material/index.html
index da5b4a1..9702465 100644
--- a/demo/material/index.html
+++ b/demo/material/index.html
@@ -181,10 +181,10 @@ <h4>Angular Data Grid sample using Material Design styling</h4>
 </div>
 </body>
 
-<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
-<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
-<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
-<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
+<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
+<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-animate.min.js"></script>
+<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-aria.min.js"></script>
+<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-messages.min.js"></script>
 <script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
 <script src="../../dist/pagination.min.js"></script>
 <script src="../../dist/dataGrid.min.js"></script>
diff --git a/dist/dataGrid.js b/dist/dataGrid.js
index 8917d18..8e098a4 100644
--- a/dist/dataGrid.js
+++ b/dist/dataGrid.js
@@ -282,6 +282,23 @@
                 });
             }
         }])
+        .directive('gridItem', ['$compile', function ($compile) {
+            return {
+                restrict: 'EA',
+                terminal:true,
+                scope: false,
+                link: function ($scope, element, attrs, ctrl, transclude) {
+                    if ($scope.serverPagination) {
+                        element.attr('ng-repeat', "item in filtered");
+                    } else {
+                        element.attr('ng-repeat', "item in filtered | startFrom:(paginationOptions.currentPage-1)*paginationOptions.itemsPerPage | limitTo:paginationOptions.itemsPerPage track by $index");
+                    }
+                    element.removeAttr('grid-item');
+                    var html = element[0].outerHTML;
+                    element.replaceWith($compile(html)($scope));
+                }
+            }
+        }])
         .directive('gridData', ['$compile', '$animate', function ($compile) {
             return {
                 restrict: 'EA',
@@ -290,18 +307,16 @@
                 scope: true,
                 controller: 'gridController',
                 link: function ($scope, $element, attrs) {
-                    var sorting = [],
-                        filters = [],
-                        rows = [],
+                    var filters = [],
                         directiveElement = $element.parent(),
                         gridId = attrs.id,
                         serverPagination = attrs.serverPagination === 'true';
+                    $scope.serverPagination = serverPagination;
 
 
                     angular.forEach(angular.element(directiveElement[0].querySelectorAll('[sortable]')), function (sortable) {
                         var element = angular.element(sortable),
                             predicate = element.attr('sortable');
-                        sorting.push(element);
                         element.attr('ng-class', "{'sort-ascent' : sortOptions.predicate ==='" +
                             predicate + "' && sortOptions.direction === 'asc', 'sort-descent' : sortOptions.predicate === '" +
                             predicate + "' && sortOptions.direction === 'desc'}");
@@ -348,19 +363,6 @@
                         });
                     });
 
-                    angular.forEach(angular.element(directiveElement[0].querySelectorAll('[grid-item]')), function (row) {
-                        var element = angular.element(row);
-                        rows.push(element);
-                        if (serverPagination) {
-                            element.attr('ng-repeat', "item in filtered");
-                        } else {
-                            element.attr('ng-repeat', "item in filtered | startFrom:(paginationOptions.currentPage-1)*paginationOptions.itemsPerPage | limitTo:paginationOptions.itemsPerPage track by $index");
-                        }
-                        $compile(element)($scope);
-                    });
-
-                    $scope.sorting = sorting;
-                    $scope.rows = rows;
                     $scope.filters = filters;
                 }
             }
diff --git a/dist/dataGrid.min.js b/dist/dataGrid.min.js
index 82ad512..a3a7f26 100644
--- a/dist/dataGrid.min.js
+++ b/dist/dataGrid.min.js
@@ -1 +1 @@
-!function(){"use strict";function t(t,e){var i=[];return t?(t.forEach(function(t){~i.indexOf(t[e])||i.push(t[e])}),i.map(function(t){return{text:t,value:t}})):void 0}angular.module("dataGrid",[]).filter("startFrom",function(){return function(t,e){return t?(e=+e,t.slice(e)):[]}}).controller("gridController",["$scope","$element","$filter","$location","filtersFactory",function(e,i,r,n,a){function o(t){var i,r=!1;i="page="+e.paginationOptions.currentPage,e.paginationOptions.itemsPerPage!==e.defaultsPaginationOptions.itemsPerPage&&(i+="&itemsPerPage="+e.paginationOptions.itemsPerPage),e.sortOptions.predicate&&(i+="&sort="+encodeURIComponent(e.sortOptions.predicate+"-"+e.sortOptions.direction)),e.filters.forEach(function(t){var n=t.model,a=t.isInScope?e.$eval(n):e.$parent.$eval(n);if(t.disableUrl)return void(r=!0);if(a){var o;if(a instanceof Date){if(isNaN(a.getTime()))return;o=a.getFullYear()+"-",o+=a.getMonth()<9?"0"+(a.getMonth()+1)+"-":a.getMonth()+1+"-",o+=a.getDate()<10?"0"+a.getDate():a.getDate(),a=o}i+="&"+encodeURIComponent(n)+"="+encodeURIComponent(a)}}),r&&c(),n.path(i),t&&e.$apply()}function s(){var t=n.path().slice(1),i={},r={};if(e.params=i,t.split("&").forEach(function(t){var e=t.split("=");i[e[0]]=e[1],"page"!==e[0]&&"sort"!==e[0]&&"itemsPerPage"!==e[0]&&(r[decodeURIComponent(e[0])]=decodeURIComponent(e[1]))}),e.filters.forEach(function(t){var i=t.model,n=r[i];if(!t.disableUrl){if(~t.filterType.toLowerCase().indexOf("date"))return e.$parent.__evaltmp=n?new Date(n):null,void e.$parent.$eval(i+"=__evaltmp");"select"!==t.filterType||n||(n=""),n&&(t.isInScope?(e.__evaltmp=n,e.$eval(i+"=__evaltmp")):(e.$parent.__evaltmp=n,e.$parent.$eval(i+"=__evaltmp")))}}),e.paginationOptions.itemsPerPage=e.defaultsPaginationOptions.itemsPerPage,e.paginationOptions.currentPage=e.defaultsPaginationOptions.currentPage,i.itemsPerPage&&(e.paginationOptions.itemsPerPage=i.itemsPerPage),i.page&&(!e.serverPagination&&(i.page-1)*e.paginationOptions.itemsPerPage>e.filtered.length?e.paginationOptions.currentPage=1:e.paginationOptions.currentPage=i.page),i.sort){var a=i.sort.split("-");e.sortOptions.predicate=decodeURIComponent(a[0]),e.sortOptions.direction=decodeURIComponent(a[1])}e.serverPagination||c()}function l(){var t=n.path().slice(1);!t&&e.sortOptions.predicate?e.sort(e.sortOptions.predicate,!0):e._gridOptions.getData("?"+t,function(t,i){e.filtered=t,e.paginationOptions.totalItems=i})}function c(){var t=Date.now(),i=!1;e._time={},e.sortOptions.predicate&&e.sortCache&&e.sortCache.predicate===e.sortOptions.predicate&&e.sortCache.direction===e.sortOptions.direction?(e.filtered=e.sortCache.data.slice(),i=!0):e.filtered=e._gridOptions.data.slice(),e._time.copy=Date.now()-t;var n=Date.now();p(),e._time.filters=Date.now()-n;var a=Date.now();e.sortOptions.predicate&&!i&&(e.filtered=r("orderBy")(e.filtered,e.sortOptions.predicate,"desc"===e.sortOptions.direction),e.sortCache={data:e.filtered.slice(),predicate:e.sortOptions.predicate,direction:e.sortOptions.direction}),e._time.sort=Date.now()-a,e._time.all=Date.now()-t,e.paginationOptions.totalItems=e.filtered.length}function p(){e.filters.forEach(function(t){var i=t.filterBy,r=t.model,n=t.isInScope?e.$eval(r):e.$parent.$eval(r),o=t.filterType;if(e.customFilters[r])e.filtered=e.customFilters[r](e.filtered,n,i);else if(n&&o){var s=a.getFilterByType(o);s&&(e.filtered=s(e.filtered,n,i))}})}e._gridOptions=e.$eval(i.attr("grid-options")),e._gridActions=e.$eval(i.attr("grid-actions")),e.serverPagination="true"===i.attr("server-pagination"),e.getDataDelay=i.attr("get-delay")||350,e._gridActions||(e.$parent.$eval(i.attr("grid-actions")+"= {}"),e._gridActions=e.$parent.$eval(i.attr("grid-actions"))),e._gridOptions.grid=e,e.filtered=e._gridOptions.data.slice(),e.paginationOptions=e._gridOptions.pagination?angular.copy(e._gridOptions.pagination):{},e.defaultsPaginationOptions={itemsPerPage:e.paginationOptions.itemsPerPage||"10",currentPage:e.paginationOptions.currentPage||1},e.paginationOptions=angular.copy(e.defaultsPaginationOptions),e.sortOptions=e._gridOptions.sort?angular.copy(e._gridOptions.sort):{},e.customFilters=e._gridOptions.customFilters?angular.copy(e._gridOptions.customFilters):{},e.urlSync=e._gridOptions.urlSync,e.$watch("_gridOptions.data",function(i){i&&i.length&&(e.sortCache={},e.filtered=e._gridOptions.data.slice(),e.filters.forEach(function(i){"select"===i.filterType&&(e[i.model+"Options"]=t(e.filtered,i.filterBy))}),e.urlSync?s(n.path()):c())}),e.sort=function(t,i){if(!i){var r=e.sortOptions.predicate===t&&"desc"===e.sortOptions.direction?"asc":"desc";e.sortOptions.direction=r,e.sortOptions.predicate=t}e.paginationOptions.currentPage=1,e.reloadGrid(i)},e.filter=function(){e.paginationOptions.currentPage=1,e.reloadGrid()},e.$on("$locationChangeSuccess",function(){(e.urlSync||e.serverPagination)&&(e.serverPagination&&(clearTimeout(e.getDataTimeout),e.getDataTimeout=setTimeout(l,e.getDataDelay)),e.filtered&&s(n.path()))}),e.reloadGrid=function(t){e.urlSync||e.serverPagination?o(t):c()},e._gridActions.refresh=e.reloadGrid,e._gridActions.filter=e.filter,e._gridActions.sort=e.sort}]).directive("gridData",["$compile","$animate",function(e){return{restrict:"EA",scope:!0,controller:"gridController",link:function(i,r,n){var a=[],o=[],s=[],l=r.parent(),c=n.id,p="true"===n.serverPagination;angular.forEach(angular.element(l[0].querySelectorAll("[sortable]")),function(t){var r=angular.element(t),n=r.attr("sortable");a.push(r),r.attr("ng-class","{'sort-ascent' : sortOptions.predicate ==='"+n+"' && sortOptions.direction === 'asc', 'sort-descent' : sortOptions.predicate === '"+n+"' && sortOptions.direction === 'desc'}"),r.attr("ng-click","sort('"+n+"')"),e(r)(i)}),angular.forEach(angular.element(document.querySelectorAll("[filter-by]")),function(e){var n=angular.element(e),a=r.find(n).length>0,s=n.attr("filter-by"),l=n.attr("filter-type")||"",p=n.attr("ng-model"),d=n.attr("disable-url");c&&n.attr("grid-id")&&c!=n.attr("grid-id")||("select"!==l||(i[p+"Options"]=t(i.$eval(r.attr("grid-options")+".data"),s)),!~l.indexOf("date")||n.attr("ng-focus")||n.attr("ng-blur")||(n.attr("ng-focus","filter('{"+p+" : this."+p+"}')"),n.attr("ng-blur","filter('{"+p+" : this."+p+"}')")),p||(p=s,n.attr("ng-model",s),n.attr("ng-change","filter()")),o.push({model:p,isInScope:a,filterBy:s,filterType:l,disableUrl:d}))}),angular.forEach(angular.element(l[0].querySelectorAll("[grid-item]")),function(t){var r=angular.element(t);s.push(r),p?r.attr("ng-repeat","item in filtered"):r.attr("ng-repeat","item in filtered | startFrom:(paginationOptions.currentPage-1)*paginationOptions.itemsPerPage | limitTo:paginationOptions.itemsPerPage track by $index"),e(r)(i)}),i.sorting=a,i.rows=s,i.filters=o}}}]).factory("filtersFactory",function(){function t(t,e,i){return t.filter(function(t){return e&&t[i]?t[i]===e:!0})}function e(t,e,i){return t.filter(function(t){return e&&t[i]?~(t[i]+"").toLowerCase().indexOf((e+"").toLowerCase()):!!t[i]})}function i(t,e,i){return e=new Date(e).getTime(),t.filter(function(t){return e&&t[i]?t[i]<=e+86399999:!0})}function r(t,e,i){return e=new Date(e).getTime(),t.filter(function(t){return e&&t[i]?t[i]>=e:!0})}return{getFilterByType:function(n){switch(n){case"select":return t;case"text":return e;case"dateTo":return i;case"dateFrom":return r;default:return null}}}})}();
\ No newline at end of file
+!function(){"use strict";function t(t,e){var i=[];return t?(t.forEach(function(t){~i.indexOf(t[e])||i.push(t[e])}),i.map(function(t){return{text:t,value:t}})):void 0}angular.module("dataGrid",[]).filter("startFrom",function(){return function(t,e){return t?(e=+e,t.slice(e)):[]}}).controller("gridController",["$scope","$element","$filter","$location","filtersFactory",function(e,i,r,n,a){function o(t){var i,r=!1;i="page="+e.paginationOptions.currentPage,e.paginationOptions.itemsPerPage!==e.defaultsPaginationOptions.itemsPerPage&&(i+="&itemsPerPage="+e.paginationOptions.itemsPerPage),e.sortOptions.predicate&&(i+="&sort="+encodeURIComponent(e.sortOptions.predicate+"-"+e.sortOptions.direction)),e.filters.forEach(function(t){var n=t.model,a=t.isInScope?e.$eval(n):e.$parent.$eval(n);if(t.disableUrl)return void(r=!0);if(a){var o;if(a instanceof Date){if(isNaN(a.getTime()))return;o=a.getFullYear()+"-",o+=a.getMonth()<9?"0"+(a.getMonth()+1)+"-":a.getMonth()+1+"-",o+=a.getDate()<10?"0"+a.getDate():a.getDate(),a=o}i+="&"+encodeURIComponent(n)+"="+encodeURIComponent(a)}}),r&&c(),n.path(i),t&&e.$apply()}function s(){var t=n.path().slice(1),i={},r={};if(e.params=i,t.split("&").forEach(function(t){var e=t.split("=");i[e[0]]=e[1],"page"!==e[0]&&"sort"!==e[0]&&"itemsPerPage"!==e[0]&&(r[decodeURIComponent(e[0])]=decodeURIComponent(e[1]))}),e.filters.forEach(function(t){var i=t.model,n=r[i];if(!t.disableUrl){if(~t.filterType.toLowerCase().indexOf("date"))return e.$parent.__evaltmp=n?new Date(n):null,void e.$parent.$eval(i+"=__evaltmp");"select"!==t.filterType||n||(n=""),n&&(t.isInScope?(e.__evaltmp=n,e.$eval(i+"=__evaltmp")):(e.$parent.__evaltmp=n,e.$parent.$eval(i+"=__evaltmp")))}}),e.paginationOptions.itemsPerPage=e.defaultsPaginationOptions.itemsPerPage,e.paginationOptions.currentPage=e.defaultsPaginationOptions.currentPage,i.itemsPerPage&&(e.paginationOptions.itemsPerPage=i.itemsPerPage),i.page&&(!e.serverPagination&&(i.page-1)*e.paginationOptions.itemsPerPage>e.filtered.length?e.paginationOptions.currentPage=1:e.paginationOptions.currentPage=i.page),i.sort){var a=i.sort.split("-");e.sortOptions.predicate=decodeURIComponent(a[0]),e.sortOptions.direction=decodeURIComponent(a[1])}e.serverPagination||c()}function l(){var t=n.path().slice(1);!t&&e.sortOptions.predicate?e.sort(e.sortOptions.predicate,!0):e._gridOptions.getData("?"+t,function(t,i){e.filtered=t,e.paginationOptions.totalItems=i})}function c(){var t=Date.now(),i=!1;e._time={},e.sortOptions.predicate&&e.sortCache&&e.sortCache.predicate===e.sortOptions.predicate&&e.sortCache.direction===e.sortOptions.direction?(e.filtered=e.sortCache.data.slice(),i=!0):e.filtered=e._gridOptions.data.slice(),e._time.copy=Date.now()-t;var n=Date.now();p(),e._time.filters=Date.now()-n;var a=Date.now();e.sortOptions.predicate&&!i&&(e.filtered=r("orderBy")(e.filtered,e.sortOptions.predicate,"desc"===e.sortOptions.direction),e.sortCache={data:e.filtered.slice(),predicate:e.sortOptions.predicate,direction:e.sortOptions.direction}),e._time.sort=Date.now()-a,e._time.all=Date.now()-t,e.paginationOptions.totalItems=e.filtered.length}function p(){e.filters.forEach(function(t){var i=t.filterBy,r=t.model,n=t.isInScope?e.$eval(r):e.$parent.$eval(r),o=t.filterType;if(e.customFilters[r])e.filtered=e.customFilters[r](e.filtered,n,i);else if(n&&o){var s=a.getFilterByType(o);s&&(e.filtered=s(e.filtered,n,i))}})}e._gridOptions=e.$eval(i.attr("grid-options")),e._gridActions=e.$eval(i.attr("grid-actions")),e.serverPagination="true"===i.attr("server-pagination"),e.getDataDelay=i.attr("get-delay")||350,e._gridActions||(e.$parent.$eval(i.attr("grid-actions")+"= {}"),e._gridActions=e.$parent.$eval(i.attr("grid-actions"))),e._gridOptions.grid=e,e.filtered=e._gridOptions.data.slice(),e.paginationOptions=e._gridOptions.pagination?angular.copy(e._gridOptions.pagination):{},e.defaultsPaginationOptions={itemsPerPage:e.paginationOptions.itemsPerPage||"10",currentPage:e.paginationOptions.currentPage||1},e.paginationOptions=angular.copy(e.defaultsPaginationOptions),e.sortOptions=e._gridOptions.sort?angular.copy(e._gridOptions.sort):{},e.customFilters=e._gridOptions.customFilters?angular.copy(e._gridOptions.customFilters):{},e.urlSync=e._gridOptions.urlSync,e.$watch("_gridOptions.data",function(i){i&&i.length&&(e.sortCache={},e.filtered=e._gridOptions.data.slice(),e.filters.forEach(function(i){"select"===i.filterType&&(e[i.model+"Options"]=t(e.filtered,i.filterBy))}),e.urlSync?s(n.path()):c())}),e.sort=function(t,i){if(!i){var r=e.sortOptions.predicate===t&&"desc"===e.sortOptions.direction?"asc":"desc";e.sortOptions.direction=r,e.sortOptions.predicate=t}e.paginationOptions.currentPage=1,e.reloadGrid(i)},e.filter=function(){e.paginationOptions.currentPage=1,e.reloadGrid()},e.$on("$locationChangeSuccess",function(){(e.urlSync||e.serverPagination)&&(e.serverPagination&&(clearTimeout(e.getDataTimeout),e.getDataTimeout=setTimeout(l,e.getDataDelay)),e.filtered&&s(n.path()))}),e.reloadGrid=function(t){e.urlSync||e.serverPagination?o(t):c()},e._gridActions.refresh=e.reloadGrid,e._gridActions.filter=e.filter,e._gridActions.sort=e.sort}]).directive("gridItem",["$compile",function(t){return{restrict:"EA",terminal:!0,scope:!1,link:function(e,i,r,n,a){e.serverPagination?i.attr("ng-repeat","item in filtered"):i.attr("ng-repeat","item in filtered | startFrom:(paginationOptions.currentPage-1)*paginationOptions.itemsPerPage | limitTo:paginationOptions.itemsPerPage track by $index"),i.removeAttr("grid-item");var o=i[0].outerHTML;i.replaceWith(t(o)(e))}}}]).directive("gridData",["$compile","$animate",function(e){return{restrict:"EA",scope:!0,controller:"gridController",link:function(i,r,n){var a=[],o=r.parent(),s=n.id,l="true"===n.serverPagination;i.serverPagination=l,angular.forEach(angular.element(o[0].querySelectorAll("[sortable]")),function(t){var r=angular.element(t),n=r.attr("sortable");r.attr("ng-class","{'sort-ascent' : sortOptions.predicate ==='"+n+"' && sortOptions.direction === 'asc', 'sort-descent' : sortOptions.predicate === '"+n+"' && sortOptions.direction === 'desc'}"),r.attr("ng-click","sort('"+n+"')"),e(r)(i)}),angular.forEach(angular.element(document.querySelectorAll("[filter-by]")),function(e){var n=angular.element(e),o=r.find(n).length>0,l=n.attr("filter-by"),c=n.attr("filter-type")||"",p=n.attr("ng-model"),d=n.attr("disable-url");s&&n.attr("grid-id")&&s!=n.attr("grid-id")||("select"!==c||(i[p+"Options"]=t(i.$eval(r.attr("grid-options")+".data"),l)),!~c.indexOf("date")||n.attr("ng-focus")||n.attr("ng-blur")||(n.attr("ng-focus","filter('{"+p+" : this."+p+"}')"),n.attr("ng-blur","filter('{"+p+" : this."+p+"}')")),p||(p=l,n.attr("ng-model",l),n.attr("ng-change","filter()")),a.push({model:p,isInScope:o,filterBy:l,filterType:c,disableUrl:d}))}),i.filters=a}}}]).factory("filtersFactory",function(){function t(t,e,i){return t.filter(function(t){return e&&t[i]?t[i]===e:!0})}function e(t,e,i){return t.filter(function(t){return e&&t[i]?~(t[i]+"").toLowerCase().indexOf((e+"").toLowerCase()):!!t[i]})}function i(t,e,i){return e=new Date(e).getTime(),t.filter(function(t){return e&&t[i]?t[i]<=e+86399999:!0})}function r(t,e,i){return e=new Date(e).getTime(),t.filter(function(t){return e&&t[i]?t[i]>=e:!0})}return{getFilterByType:function(n){switch(n){case"select":return t;case"text":return e;case"dateTo":return i;case"dateFrom":return r;default:return null}}}})}();
\ No newline at end of file
diff --git a/src/js/dataGrid.js b/src/js/dataGrid.js
index 8917d18..8e098a4 100644
--- a/src/js/dataGrid.js
+++ b/src/js/dataGrid.js
@@ -282,6 +282,23 @@
                 });
             }
         }])
+        .directive('gridItem', ['$compile', function ($compile) {
+            return {
+                restrict: 'EA',
+                terminal:true,
+                scope: false,
+                link: function ($scope, element, attrs, ctrl, transclude) {
+                    if ($scope.serverPagination) {
+                        element.attr('ng-repeat', "item in filtered");
+                    } else {
+                        element.attr('ng-repeat', "item in filtered | startFrom:(paginationOptions.currentPage-1)*paginationOptions.itemsPerPage | limitTo:paginationOptions.itemsPerPage track by $index");
+                    }
+                    element.removeAttr('grid-item');
+                    var html = element[0].outerHTML;
+                    element.replaceWith($compile(html)($scope));
+                }
+            }
+        }])
         .directive('gridData', ['$compile', '$animate', function ($compile) {
             return {
                 restrict: 'EA',
@@ -290,18 +307,16 @@
                 scope: true,
                 controller: 'gridController',
                 link: function ($scope, $element, attrs) {
-                    var sorting = [],
-                        filters = [],
-                        rows = [],
+                    var filters = [],
                         directiveElement = $element.parent(),
                         gridId = attrs.id,
                         serverPagination = attrs.serverPagination === 'true';
+                    $scope.serverPagination = serverPagination;
 
 
                     angular.forEach(angular.element(directiveElement[0].querySelectorAll('[sortable]')), function (sortable) {
                         var element = angular.element(sortable),
                             predicate = element.attr('sortable');
-                        sorting.push(element);
                         element.attr('ng-class', "{'sort-ascent' : sortOptions.predicate ==='" +
                             predicate + "' && sortOptions.direction === 'asc', 'sort-descent' : sortOptions.predicate === '" +
                             predicate + "' && sortOptions.direction === 'desc'}");
@@ -348,19 +363,6 @@
                         });
                     });
 
-                    angular.forEach(angular.element(directiveElement[0].querySelectorAll('[grid-item]')), function (row) {
-                        var element = angular.element(row);
-                        rows.push(element);
-                        if (serverPagination) {
-                            element.attr('ng-repeat', "item in filtered");
-                        } else {
-                            element.attr('ng-repeat', "item in filtered | startFrom:(paginationOptions.currentPage-1)*paginationOptions.itemsPerPage | limitTo:paginationOptions.itemsPerPage track by $index");
-                        }
-                        $compile(element)($scope);
-                    });
-
-                    $scope.sorting = sorting;
-                    $scope.rows = rows;
                     $scope.filters = filters;
                 }
             }

From b25113b7116d6f8bbdf5b4da9507ca841a687758 Mon Sep 17 00:00:00 2001
From: AlexZ <alexanderzhuk@coherentsolutions.com>
Date: Thu, 9 Mar 2017 16:00:17 +0300
Subject: [PATCH 02/39] Update README.md

Change compatibility to include Angular 1.6.
---
 README.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index 30c62b2..c7bf443 100644
--- a/README.md
+++ b/README.md
@@ -1,6 +1,6 @@
 ##Angular Data Grid
 Light, flexible and performant Data Grid for AngularJS apps, with built-in sorting, pagination and filtering options, unified API for client-side and server-side data fetching, 
-seamless synchronization with browser address bar and total freedom in mark-up and styling suitable for your application. Angular 1.3 - 1.5 compliant.
+seamless synchronization with browser address bar and total freedom in mark-up and styling suitable for your application. Angular 1.3 - 1.6 compliant.
 
 Demo Bootstrap: http://angular-data-grid.github.io/demo/bootstrap/
 
@@ -87,7 +87,7 @@ angular.module('myApp', ['dataGrid', 'pagination'])
                 };
 ```
 
-NOTE: `grid-item` wrapper directive used in the example above, to make code more concise - you can use regular `ng-repeat` instead if needed.
+NOTE: `grid-item` wrapper directive used in the example above, to make code more concise - you can use regular `ng-repeat` instead if needed. 
 
 ### Basic API
 

From a4614f4ad7e31f63b68b1ac465acdd591277da5b Mon Sep 17 00:00:00 2001
From: AlexZ <alexanderzhuk@coherentsolutions.com>
Date: Thu, 9 Mar 2017 22:01:27 +0300
Subject: [PATCH 03/39] Update README.md

adding example of ng-repeat into docs
---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index c7bf443..0f51cc8 100644
--- a/README.md
+++ b/README.md
@@ -87,7 +87,7 @@ angular.module('myApp', ['dataGrid', 'pagination'])
                 };
 ```
 
-NOTE: `grid-item` wrapper directive used in the example above, to make code more concise - you can use regular `ng-repeat` instead if needed. 
+NOTE: `grid-item` wrapper directive used in the example above, to make code more concise - you can use regular `ng-repeat` instead if needed, like: `ng-repeat="item in filtered | startFrom:(paginationOptions.currentPage-1)*paginationOptions.itemsPerPage | limitTo:paginationOptions.itemsPerPage track by $index")"`
 
 ### Basic API
 

From 05dbbaff14793fd18e2e777d991c699345e85164 Mon Sep 17 00:00:00 2001
From: AlexZ <alexanderzhuk@coherentsolutions.com>
Date: Thu, 9 Mar 2017 22:03:23 +0300
Subject: [PATCH 04/39] Update README.md

---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 0f51cc8..540a468 100644
--- a/README.md
+++ b/README.md
@@ -87,7 +87,7 @@ angular.module('myApp', ['dataGrid', 'pagination'])
                 };
 ```
 
-NOTE: `grid-item` wrapper directive used in the example above, to make code more concise - you can use regular `ng-repeat` instead if needed, like: `ng-repeat="item in filtered | startFrom:(paginationOptions.currentPage-1)*paginationOptions.itemsPerPage | limitTo:paginationOptions.itemsPerPage track by $index")"`
+NOTE: `grid-item` wrapper directive used in the example above, to make code more concise, but you can always use regular `ng-repeat` instead if needed, like: `ng-repeat="item in filtered | startFrom:(paginationOptions.currentPage-1)*paginationOptions.itemsPerPage | limitTo:paginationOptions.itemsPerPage track by $index")"`
 
 ### Basic API
 

From 0107e44431da247f673fd5753d7da39d9baa9db6 Mon Sep 17 00:00:00 2001
From: AlexZ <alexanderzhuk@coherentsolutions.com>
Date: Thu, 9 Mar 2017 22:55:17 +0300
Subject: [PATCH 05/39] Update README.md

---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 540a468..6d87116 100644
--- a/README.md
+++ b/README.md
@@ -87,7 +87,7 @@ angular.module('myApp', ['dataGrid', 'pagination'])
                 };
 ```
 
-NOTE: `grid-item` wrapper directive used in the example above, to make code more concise, but you can always use regular `ng-repeat` instead if needed, like: `ng-repeat="item in filtered | startFrom:(paginationOptions.currentPage-1)*paginationOptions.itemsPerPage | limitTo:paginationOptions.itemsPerPage track by $index")"`
+NOTE: `grid-item` wrapper directive used in the example above, to make code more concise, but you can always use regular `ng-repeat` instead, like: `ng-repeat="item in filtered | startFrom:(paginationOptions.currentPage-1)*paginationOptions.itemsPerPage | limitTo:paginationOptions.itemsPerPage track by $index"`
 
 ### Basic API
 

From 2b80cb42d42654a962f9a2fcfdd4960b79d72b5f Mon Sep 17 00:00:00 2001
From: skozlov <sergey.kozlovich@landsend.com>
Date: Fri, 10 Mar 2017 13:24:09 +0300
Subject: [PATCH 06/39] Custom filter doesn't work with checkboxes any more -
 fixed.

---
 dist/dataGrid.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/dist/dataGrid.js b/dist/dataGrid.js
index 8e098a4..91a2986 100644
--- a/dist/dataGrid.js
+++ b/dist/dataGrid.js
@@ -323,11 +323,11 @@
                         element.attr('ng-click', "sort('" + predicate + "')");
                         $compile(element)($scope);
                     });
-
-                    angular.forEach(angular.element(document.querySelectorAll('[filter-by]')), function (filter) {
+                    angular.forEach(document.querySelectorAll('[filter-by]'), function (filter) {
                         var element = angular.element(filter),
-                            isInScope = $element.find(element).length > 0,
                             predicate = element.attr('filter-by'),
+                            dataGridElement = document.querySelectorAll('[grid-data]')[0],
+                            isInScope = dataGridElement.querySelectorAll('[filter-by="'+ predicate+'"]').length > 0,
                             filterType = element.attr('filter-type') || '',
                             urlName = element.attr('ng-model'),
                             disableUrl = element.attr('disable-url');

From 3484f3729bda923493926d9af42439c98fbc0f89 Mon Sep 17 00:00:00 2001
From: skozlov <sergey.kozlovich@landsend.com>
Date: Fri, 10 Mar 2017 13:39:12 +0300
Subject: [PATCH 07/39] Custom filter doesn't work with checkboxes any more -
 fixed #14

---
 dist/dataGrid.min.js | 2 +-
 src/js/dataGrid.js   | 6 +++---
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/dist/dataGrid.min.js b/dist/dataGrid.min.js
index a3a7f26..bf6aff1 100644
--- a/dist/dataGrid.min.js
+++ b/dist/dataGrid.min.js
@@ -1 +1 @@
-!function(){"use strict";function t(t,e){var i=[];return t?(t.forEach(function(t){~i.indexOf(t[e])||i.push(t[e])}),i.map(function(t){return{text:t,value:t}})):void 0}angular.module("dataGrid",[]).filter("startFrom",function(){return function(t,e){return t?(e=+e,t.slice(e)):[]}}).controller("gridController",["$scope","$element","$filter","$location","filtersFactory",function(e,i,r,n,a){function o(t){var i,r=!1;i="page="+e.paginationOptions.currentPage,e.paginationOptions.itemsPerPage!==e.defaultsPaginationOptions.itemsPerPage&&(i+="&itemsPerPage="+e.paginationOptions.itemsPerPage),e.sortOptions.predicate&&(i+="&sort="+encodeURIComponent(e.sortOptions.predicate+"-"+e.sortOptions.direction)),e.filters.forEach(function(t){var n=t.model,a=t.isInScope?e.$eval(n):e.$parent.$eval(n);if(t.disableUrl)return void(r=!0);if(a){var o;if(a instanceof Date){if(isNaN(a.getTime()))return;o=a.getFullYear()+"-",o+=a.getMonth()<9?"0"+(a.getMonth()+1)+"-":a.getMonth()+1+"-",o+=a.getDate()<10?"0"+a.getDate():a.getDate(),a=o}i+="&"+encodeURIComponent(n)+"="+encodeURIComponent(a)}}),r&&c(),n.path(i),t&&e.$apply()}function s(){var t=n.path().slice(1),i={},r={};if(e.params=i,t.split("&").forEach(function(t){var e=t.split("=");i[e[0]]=e[1],"page"!==e[0]&&"sort"!==e[0]&&"itemsPerPage"!==e[0]&&(r[decodeURIComponent(e[0])]=decodeURIComponent(e[1]))}),e.filters.forEach(function(t){var i=t.model,n=r[i];if(!t.disableUrl){if(~t.filterType.toLowerCase().indexOf("date"))return e.$parent.__evaltmp=n?new Date(n):null,void e.$parent.$eval(i+"=__evaltmp");"select"!==t.filterType||n||(n=""),n&&(t.isInScope?(e.__evaltmp=n,e.$eval(i+"=__evaltmp")):(e.$parent.__evaltmp=n,e.$parent.$eval(i+"=__evaltmp")))}}),e.paginationOptions.itemsPerPage=e.defaultsPaginationOptions.itemsPerPage,e.paginationOptions.currentPage=e.defaultsPaginationOptions.currentPage,i.itemsPerPage&&(e.paginationOptions.itemsPerPage=i.itemsPerPage),i.page&&(!e.serverPagination&&(i.page-1)*e.paginationOptions.itemsPerPage>e.filtered.length?e.paginationOptions.currentPage=1:e.paginationOptions.currentPage=i.page),i.sort){var a=i.sort.split("-");e.sortOptions.predicate=decodeURIComponent(a[0]),e.sortOptions.direction=decodeURIComponent(a[1])}e.serverPagination||c()}function l(){var t=n.path().slice(1);!t&&e.sortOptions.predicate?e.sort(e.sortOptions.predicate,!0):e._gridOptions.getData("?"+t,function(t,i){e.filtered=t,e.paginationOptions.totalItems=i})}function c(){var t=Date.now(),i=!1;e._time={},e.sortOptions.predicate&&e.sortCache&&e.sortCache.predicate===e.sortOptions.predicate&&e.sortCache.direction===e.sortOptions.direction?(e.filtered=e.sortCache.data.slice(),i=!0):e.filtered=e._gridOptions.data.slice(),e._time.copy=Date.now()-t;var n=Date.now();p(),e._time.filters=Date.now()-n;var a=Date.now();e.sortOptions.predicate&&!i&&(e.filtered=r("orderBy")(e.filtered,e.sortOptions.predicate,"desc"===e.sortOptions.direction),e.sortCache={data:e.filtered.slice(),predicate:e.sortOptions.predicate,direction:e.sortOptions.direction}),e._time.sort=Date.now()-a,e._time.all=Date.now()-t,e.paginationOptions.totalItems=e.filtered.length}function p(){e.filters.forEach(function(t){var i=t.filterBy,r=t.model,n=t.isInScope?e.$eval(r):e.$parent.$eval(r),o=t.filterType;if(e.customFilters[r])e.filtered=e.customFilters[r](e.filtered,n,i);else if(n&&o){var s=a.getFilterByType(o);s&&(e.filtered=s(e.filtered,n,i))}})}e._gridOptions=e.$eval(i.attr("grid-options")),e._gridActions=e.$eval(i.attr("grid-actions")),e.serverPagination="true"===i.attr("server-pagination"),e.getDataDelay=i.attr("get-delay")||350,e._gridActions||(e.$parent.$eval(i.attr("grid-actions")+"= {}"),e._gridActions=e.$parent.$eval(i.attr("grid-actions"))),e._gridOptions.grid=e,e.filtered=e._gridOptions.data.slice(),e.paginationOptions=e._gridOptions.pagination?angular.copy(e._gridOptions.pagination):{},e.defaultsPaginationOptions={itemsPerPage:e.paginationOptions.itemsPerPage||"10",currentPage:e.paginationOptions.currentPage||1},e.paginationOptions=angular.copy(e.defaultsPaginationOptions),e.sortOptions=e._gridOptions.sort?angular.copy(e._gridOptions.sort):{},e.customFilters=e._gridOptions.customFilters?angular.copy(e._gridOptions.customFilters):{},e.urlSync=e._gridOptions.urlSync,e.$watch("_gridOptions.data",function(i){i&&i.length&&(e.sortCache={},e.filtered=e._gridOptions.data.slice(),e.filters.forEach(function(i){"select"===i.filterType&&(e[i.model+"Options"]=t(e.filtered,i.filterBy))}),e.urlSync?s(n.path()):c())}),e.sort=function(t,i){if(!i){var r=e.sortOptions.predicate===t&&"desc"===e.sortOptions.direction?"asc":"desc";e.sortOptions.direction=r,e.sortOptions.predicate=t}e.paginationOptions.currentPage=1,e.reloadGrid(i)},e.filter=function(){e.paginationOptions.currentPage=1,e.reloadGrid()},e.$on("$locationChangeSuccess",function(){(e.urlSync||e.serverPagination)&&(e.serverPagination&&(clearTimeout(e.getDataTimeout),e.getDataTimeout=setTimeout(l,e.getDataDelay)),e.filtered&&s(n.path()))}),e.reloadGrid=function(t){e.urlSync||e.serverPagination?o(t):c()},e._gridActions.refresh=e.reloadGrid,e._gridActions.filter=e.filter,e._gridActions.sort=e.sort}]).directive("gridItem",["$compile",function(t){return{restrict:"EA",terminal:!0,scope:!1,link:function(e,i,r,n,a){e.serverPagination?i.attr("ng-repeat","item in filtered"):i.attr("ng-repeat","item in filtered | startFrom:(paginationOptions.currentPage-1)*paginationOptions.itemsPerPage | limitTo:paginationOptions.itemsPerPage track by $index"),i.removeAttr("grid-item");var o=i[0].outerHTML;i.replaceWith(t(o)(e))}}}]).directive("gridData",["$compile","$animate",function(e){return{restrict:"EA",scope:!0,controller:"gridController",link:function(i,r,n){var a=[],o=r.parent(),s=n.id,l="true"===n.serverPagination;i.serverPagination=l,angular.forEach(angular.element(o[0].querySelectorAll("[sortable]")),function(t){var r=angular.element(t),n=r.attr("sortable");r.attr("ng-class","{'sort-ascent' : sortOptions.predicate ==='"+n+"' && sortOptions.direction === 'asc', 'sort-descent' : sortOptions.predicate === '"+n+"' && sortOptions.direction === 'desc'}"),r.attr("ng-click","sort('"+n+"')"),e(r)(i)}),angular.forEach(angular.element(document.querySelectorAll("[filter-by]")),function(e){var n=angular.element(e),o=r.find(n).length>0,l=n.attr("filter-by"),c=n.attr("filter-type")||"",p=n.attr("ng-model"),d=n.attr("disable-url");s&&n.attr("grid-id")&&s!=n.attr("grid-id")||("select"!==c||(i[p+"Options"]=t(i.$eval(r.attr("grid-options")+".data"),l)),!~c.indexOf("date")||n.attr("ng-focus")||n.attr("ng-blur")||(n.attr("ng-focus","filter('{"+p+" : this."+p+"}')"),n.attr("ng-blur","filter('{"+p+" : this."+p+"}')")),p||(p=l,n.attr("ng-model",l),n.attr("ng-change","filter()")),a.push({model:p,isInScope:o,filterBy:l,filterType:c,disableUrl:d}))}),i.filters=a}}}]).factory("filtersFactory",function(){function t(t,e,i){return t.filter(function(t){return e&&t[i]?t[i]===e:!0})}function e(t,e,i){return t.filter(function(t){return e&&t[i]?~(t[i]+"").toLowerCase().indexOf((e+"").toLowerCase()):!!t[i]})}function i(t,e,i){return e=new Date(e).getTime(),t.filter(function(t){return e&&t[i]?t[i]<=e+86399999:!0})}function r(t,e,i){return e=new Date(e).getTime(),t.filter(function(t){return e&&t[i]?t[i]>=e:!0})}return{getFilterByType:function(n){switch(n){case"select":return t;case"text":return e;case"dateTo":return i;case"dateFrom":return r;default:return null}}}})}();
\ No newline at end of file
+!function(){"use strict";function t(t,e){var i=[];return t?(t.forEach(function(t){~i.indexOf(t[e])||i.push(t[e])}),i.map(function(t){return{text:t,value:t}})):void 0}angular.module("dataGrid",[]).filter("startFrom",function(){return function(t,e){return t?(e=+e,t.slice(e)):[]}}).controller("gridController",["$scope","$element","$filter","$location","filtersFactory",function(e,i,r,n,a){function o(t){var i,r=!1;i="page="+e.paginationOptions.currentPage,e.paginationOptions.itemsPerPage!==e.defaultsPaginationOptions.itemsPerPage&&(i+="&itemsPerPage="+e.paginationOptions.itemsPerPage),e.sortOptions.predicate&&(i+="&sort="+encodeURIComponent(e.sortOptions.predicate+"-"+e.sortOptions.direction)),e.filters.forEach(function(t){var n=t.model,a=t.isInScope?e.$eval(n):e.$parent.$eval(n);if(t.disableUrl)return void(r=!0);if(a){var o;if(a instanceof Date){if(isNaN(a.getTime()))return;o=a.getFullYear()+"-",o+=a.getMonth()<9?"0"+(a.getMonth()+1)+"-":a.getMonth()+1+"-",o+=a.getDate()<10?"0"+a.getDate():a.getDate(),a=o}i+="&"+encodeURIComponent(n)+"="+encodeURIComponent(a)}}),r&&c(),n.path(i),t&&e.$apply()}function s(){var t=n.path().slice(1),i={},r={};if(e.params=i,t.split("&").forEach(function(t){var e=t.split("=");i[e[0]]=e[1],"page"!==e[0]&&"sort"!==e[0]&&"itemsPerPage"!==e[0]&&(r[decodeURIComponent(e[0])]=decodeURIComponent(e[1]))}),e.filters.forEach(function(t){var i=t.model,n=r[i];if(!t.disableUrl){if(~t.filterType.toLowerCase().indexOf("date"))return e.$parent.__evaltmp=n?new Date(n):null,void e.$parent.$eval(i+"=__evaltmp");"select"!==t.filterType||n||(n=""),n&&(t.isInScope?(e.__evaltmp=n,e.$eval(i+"=__evaltmp")):(e.$parent.__evaltmp=n,e.$parent.$eval(i+"=__evaltmp")))}}),e.paginationOptions.itemsPerPage=e.defaultsPaginationOptions.itemsPerPage,e.paginationOptions.currentPage=e.defaultsPaginationOptions.currentPage,i.itemsPerPage&&(e.paginationOptions.itemsPerPage=i.itemsPerPage),i.page&&(!e.serverPagination&&(i.page-1)*e.paginationOptions.itemsPerPage>e.filtered.length?e.paginationOptions.currentPage=1:e.paginationOptions.currentPage=i.page),i.sort){var a=i.sort.split("-");e.sortOptions.predicate=decodeURIComponent(a[0]),e.sortOptions.direction=decodeURIComponent(a[1])}e.serverPagination||c()}function l(){var t=n.path().slice(1);!t&&e.sortOptions.predicate?e.sort(e.sortOptions.predicate,!0):e._gridOptions.getData("?"+t,function(t,i){e.filtered=t,e.paginationOptions.totalItems=i})}function c(){var t=Date.now(),i=!1;e._time={},e.sortOptions.predicate&&e.sortCache&&e.sortCache.predicate===e.sortOptions.predicate&&e.sortCache.direction===e.sortOptions.direction?(e.filtered=e.sortCache.data.slice(),i=!0):e.filtered=e._gridOptions.data.slice(),e._time.copy=Date.now()-t;var n=Date.now();p(),e._time.filters=Date.now()-n;var a=Date.now();e.sortOptions.predicate&&!i&&(e.filtered=r("orderBy")(e.filtered,e.sortOptions.predicate,"desc"===e.sortOptions.direction),e.sortCache={data:e.filtered.slice(),predicate:e.sortOptions.predicate,direction:e.sortOptions.direction}),e._time.sort=Date.now()-a,e._time.all=Date.now()-t,e.paginationOptions.totalItems=e.filtered.length}function p(){e.filters.forEach(function(t){var i=t.filterBy,r=t.model,n=t.isInScope?e.$eval(r):e.$parent.$eval(r),o=t.filterType;if(e.customFilters[r])e.filtered=e.customFilters[r](e.filtered,n,i);else if(n&&o){var s=a.getFilterByType(o);s&&(e.filtered=s(e.filtered,n,i))}})}e._gridOptions=e.$eval(i.attr("grid-options")),e._gridActions=e.$eval(i.attr("grid-actions")),e.serverPagination="true"===i.attr("server-pagination"),e.getDataDelay=i.attr("get-delay")||350,e._gridActions||(e.$parent.$eval(i.attr("grid-actions")+"= {}"),e._gridActions=e.$parent.$eval(i.attr("grid-actions"))),e._gridOptions.grid=e,e.filtered=e._gridOptions.data.slice(),e.paginationOptions=e._gridOptions.pagination?angular.copy(e._gridOptions.pagination):{},e.defaultsPaginationOptions={itemsPerPage:e.paginationOptions.itemsPerPage||"10",currentPage:e.paginationOptions.currentPage||1},e.paginationOptions=angular.copy(e.defaultsPaginationOptions),e.sortOptions=e._gridOptions.sort?angular.copy(e._gridOptions.sort):{},e.customFilters=e._gridOptions.customFilters?angular.copy(e._gridOptions.customFilters):{},e.urlSync=e._gridOptions.urlSync,e.$watch("_gridOptions.data",function(i){i&&i.length&&(e.sortCache={},e.filtered=e._gridOptions.data.slice(),e.filters.forEach(function(i){"select"===i.filterType&&(e[i.model+"Options"]=t(e.filtered,i.filterBy))}),e.urlSync?s(n.path()):c())}),e.sort=function(t,i){if(!i){var r=e.sortOptions.predicate===t&&"desc"===e.sortOptions.direction?"asc":"desc";e.sortOptions.direction=r,e.sortOptions.predicate=t}e.paginationOptions.currentPage=1,e.reloadGrid(i)},e.filter=function(){e.paginationOptions.currentPage=1,e.reloadGrid()},e.$on("$locationChangeSuccess",function(){(e.urlSync||e.serverPagination)&&(e.serverPagination&&(clearTimeout(e.getDataTimeout),e.getDataTimeout=setTimeout(l,e.getDataDelay)),e.filtered&&s(n.path()))}),e.reloadGrid=function(t){e.urlSync||e.serverPagination?o(t):c()},e._gridActions.refresh=e.reloadGrid,e._gridActions.filter=e.filter,e._gridActions.sort=e.sort}]).directive("gridItem",["$compile",function(t){return{restrict:"EA",terminal:!0,scope:!1,link:function(e,i,r,n,a){e.serverPagination?i.attr("ng-repeat","item in filtered"):i.attr("ng-repeat","item in filtered | startFrom:(paginationOptions.currentPage-1)*paginationOptions.itemsPerPage | limitTo:paginationOptions.itemsPerPage track by $index"),i.removeAttr("grid-item");var o=i[0].outerHTML;i.replaceWith(t(o)(e))}}}]).directive("gridData",["$compile","$animate",function(e){return{restrict:"EA",scope:!0,controller:"gridController",link:function(i,r,n){var a=[],o=r.parent(),s=n.id,l="true"===n.serverPagination;i.serverPagination=l,angular.forEach(angular.element(o[0].querySelectorAll("[sortable]")),function(t){var r=angular.element(t),n=r.attr("sortable");r.attr("ng-class","{'sort-ascent' : sortOptions.predicate ==='"+n+"' && sortOptions.direction === 'asc', 'sort-descent' : sortOptions.predicate === '"+n+"' && sortOptions.direction === 'desc'}"),r.attr("ng-click","sort('"+n+"')"),e(r)(i)}),angular.forEach(document.querySelectorAll("[filter-by]"),function(e){var n=angular.element(e),o=n.attr("filter-by"),l=document.querySelectorAll("[grid-data]")[0],c=l.querySelectorAll('[filter-by="'+o+'"]').length>0,p=n.attr("filter-type")||"",d=n.attr("ng-model"),g=n.attr("disable-url");s&&n.attr("grid-id")&&s!=n.attr("grid-id")||("select"!==p||(i[d+"Options"]=t(i.$eval(r.attr("grid-options")+".data"),o)),!~p.indexOf("date")||n.attr("ng-focus")||n.attr("ng-blur")||(n.attr("ng-focus","filter('{"+d+" : this."+d+"}')"),n.attr("ng-blur","filter('{"+d+" : this."+d+"}')")),d||(d=o,n.attr("ng-model",o),n.attr("ng-change","filter()")),a.push({model:d,isInScope:c,filterBy:o,filterType:p,disableUrl:g}))}),i.filters=a}}}]).factory("filtersFactory",function(){function t(t,e,i){return t.filter(function(t){return e&&t[i]?t[i]===e:!0})}function e(t,e,i){return t.filter(function(t){return e&&t[i]?~(t[i]+"").toLowerCase().indexOf((e+"").toLowerCase()):!!t[i]})}function i(t,e,i){return e=new Date(e).getTime(),t.filter(function(t){return e&&t[i]?t[i]<=e+86399999:!0})}function r(t,e,i){return e=new Date(e).getTime(),t.filter(function(t){return e&&t[i]?t[i]>=e:!0})}return{getFilterByType:function(n){switch(n){case"select":return t;case"text":return e;case"dateTo":return i;case"dateFrom":return r;default:return null}}}})}();
\ No newline at end of file
diff --git a/src/js/dataGrid.js b/src/js/dataGrid.js
index 8e098a4..91a2986 100644
--- a/src/js/dataGrid.js
+++ b/src/js/dataGrid.js
@@ -323,11 +323,11 @@
                         element.attr('ng-click', "sort('" + predicate + "')");
                         $compile(element)($scope);
                     });
-
-                    angular.forEach(angular.element(document.querySelectorAll('[filter-by]')), function (filter) {
+                    angular.forEach(document.querySelectorAll('[filter-by]'), function (filter) {
                         var element = angular.element(filter),
-                            isInScope = $element.find(element).length > 0,
                             predicate = element.attr('filter-by'),
+                            dataGridElement = document.querySelectorAll('[grid-data]')[0],
+                            isInScope = dataGridElement.querySelectorAll('[filter-by="'+ predicate+'"]').length > 0,
                             filterType = element.attr('filter-type') || '',
                             urlName = element.attr('ng-model'),
                             disableUrl = element.attr('disable-url');

From c87e29dee019f2e45ec793033ec11df1eab21a72 Mon Sep 17 00:00:00 2001
From: Alexander Zhuk <AZhuk@lifetimefitness.com>
Date: Sat, 25 Mar 2017 00:07:29 +0300
Subject: [PATCH 08/39] fixing 'grid doesn't refresh when _gridOptions.data is
 an empty array' issue

---
 dist/dataGrid.js     | 2 +-
 dist/dataGrid.min.js | 2 +-
 src/js/dataGrid.js   | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/dist/dataGrid.js b/dist/dataGrid.js
index 91a2986..1bc8aef 100644
--- a/dist/dataGrid.js
+++ b/dist/dataGrid.js
@@ -38,7 +38,7 @@
             $scope.urlSync = $scope._gridOptions.urlSync;
 
             $scope.$watch('_gridOptions.data', function (newValue) {
-                if (newValue && newValue.length) {
+                if (newValue && newValue.length > -1) {
                     $scope.sortCache = {};
                     $scope.filtered = $scope._gridOptions.data.slice();
                     $scope.filters.forEach(function (filter) {
diff --git a/dist/dataGrid.min.js b/dist/dataGrid.min.js
index bf6aff1..9bf1cd2 100644
--- a/dist/dataGrid.min.js
+++ b/dist/dataGrid.min.js
@@ -1 +1 @@
-!function(){"use strict";function t(t,e){var i=[];return t?(t.forEach(function(t){~i.indexOf(t[e])||i.push(t[e])}),i.map(function(t){return{text:t,value:t}})):void 0}angular.module("dataGrid",[]).filter("startFrom",function(){return function(t,e){return t?(e=+e,t.slice(e)):[]}}).controller("gridController",["$scope","$element","$filter","$location","filtersFactory",function(e,i,r,n,a){function o(t){var i,r=!1;i="page="+e.paginationOptions.currentPage,e.paginationOptions.itemsPerPage!==e.defaultsPaginationOptions.itemsPerPage&&(i+="&itemsPerPage="+e.paginationOptions.itemsPerPage),e.sortOptions.predicate&&(i+="&sort="+encodeURIComponent(e.sortOptions.predicate+"-"+e.sortOptions.direction)),e.filters.forEach(function(t){var n=t.model,a=t.isInScope?e.$eval(n):e.$parent.$eval(n);if(t.disableUrl)return void(r=!0);if(a){var o;if(a instanceof Date){if(isNaN(a.getTime()))return;o=a.getFullYear()+"-",o+=a.getMonth()<9?"0"+(a.getMonth()+1)+"-":a.getMonth()+1+"-",o+=a.getDate()<10?"0"+a.getDate():a.getDate(),a=o}i+="&"+encodeURIComponent(n)+"="+encodeURIComponent(a)}}),r&&c(),n.path(i),t&&e.$apply()}function s(){var t=n.path().slice(1),i={},r={};if(e.params=i,t.split("&").forEach(function(t){var e=t.split("=");i[e[0]]=e[1],"page"!==e[0]&&"sort"!==e[0]&&"itemsPerPage"!==e[0]&&(r[decodeURIComponent(e[0])]=decodeURIComponent(e[1]))}),e.filters.forEach(function(t){var i=t.model,n=r[i];if(!t.disableUrl){if(~t.filterType.toLowerCase().indexOf("date"))return e.$parent.__evaltmp=n?new Date(n):null,void e.$parent.$eval(i+"=__evaltmp");"select"!==t.filterType||n||(n=""),n&&(t.isInScope?(e.__evaltmp=n,e.$eval(i+"=__evaltmp")):(e.$parent.__evaltmp=n,e.$parent.$eval(i+"=__evaltmp")))}}),e.paginationOptions.itemsPerPage=e.defaultsPaginationOptions.itemsPerPage,e.paginationOptions.currentPage=e.defaultsPaginationOptions.currentPage,i.itemsPerPage&&(e.paginationOptions.itemsPerPage=i.itemsPerPage),i.page&&(!e.serverPagination&&(i.page-1)*e.paginationOptions.itemsPerPage>e.filtered.length?e.paginationOptions.currentPage=1:e.paginationOptions.currentPage=i.page),i.sort){var a=i.sort.split("-");e.sortOptions.predicate=decodeURIComponent(a[0]),e.sortOptions.direction=decodeURIComponent(a[1])}e.serverPagination||c()}function l(){var t=n.path().slice(1);!t&&e.sortOptions.predicate?e.sort(e.sortOptions.predicate,!0):e._gridOptions.getData("?"+t,function(t,i){e.filtered=t,e.paginationOptions.totalItems=i})}function c(){var t=Date.now(),i=!1;e._time={},e.sortOptions.predicate&&e.sortCache&&e.sortCache.predicate===e.sortOptions.predicate&&e.sortCache.direction===e.sortOptions.direction?(e.filtered=e.sortCache.data.slice(),i=!0):e.filtered=e._gridOptions.data.slice(),e._time.copy=Date.now()-t;var n=Date.now();p(),e._time.filters=Date.now()-n;var a=Date.now();e.sortOptions.predicate&&!i&&(e.filtered=r("orderBy")(e.filtered,e.sortOptions.predicate,"desc"===e.sortOptions.direction),e.sortCache={data:e.filtered.slice(),predicate:e.sortOptions.predicate,direction:e.sortOptions.direction}),e._time.sort=Date.now()-a,e._time.all=Date.now()-t,e.paginationOptions.totalItems=e.filtered.length}function p(){e.filters.forEach(function(t){var i=t.filterBy,r=t.model,n=t.isInScope?e.$eval(r):e.$parent.$eval(r),o=t.filterType;if(e.customFilters[r])e.filtered=e.customFilters[r](e.filtered,n,i);else if(n&&o){var s=a.getFilterByType(o);s&&(e.filtered=s(e.filtered,n,i))}})}e._gridOptions=e.$eval(i.attr("grid-options")),e._gridActions=e.$eval(i.attr("grid-actions")),e.serverPagination="true"===i.attr("server-pagination"),e.getDataDelay=i.attr("get-delay")||350,e._gridActions||(e.$parent.$eval(i.attr("grid-actions")+"= {}"),e._gridActions=e.$parent.$eval(i.attr("grid-actions"))),e._gridOptions.grid=e,e.filtered=e._gridOptions.data.slice(),e.paginationOptions=e._gridOptions.pagination?angular.copy(e._gridOptions.pagination):{},e.defaultsPaginationOptions={itemsPerPage:e.paginationOptions.itemsPerPage||"10",currentPage:e.paginationOptions.currentPage||1},e.paginationOptions=angular.copy(e.defaultsPaginationOptions),e.sortOptions=e._gridOptions.sort?angular.copy(e._gridOptions.sort):{},e.customFilters=e._gridOptions.customFilters?angular.copy(e._gridOptions.customFilters):{},e.urlSync=e._gridOptions.urlSync,e.$watch("_gridOptions.data",function(i){i&&i.length&&(e.sortCache={},e.filtered=e._gridOptions.data.slice(),e.filters.forEach(function(i){"select"===i.filterType&&(e[i.model+"Options"]=t(e.filtered,i.filterBy))}),e.urlSync?s(n.path()):c())}),e.sort=function(t,i){if(!i){var r=e.sortOptions.predicate===t&&"desc"===e.sortOptions.direction?"asc":"desc";e.sortOptions.direction=r,e.sortOptions.predicate=t}e.paginationOptions.currentPage=1,e.reloadGrid(i)},e.filter=function(){e.paginationOptions.currentPage=1,e.reloadGrid()},e.$on("$locationChangeSuccess",function(){(e.urlSync||e.serverPagination)&&(e.serverPagination&&(clearTimeout(e.getDataTimeout),e.getDataTimeout=setTimeout(l,e.getDataDelay)),e.filtered&&s(n.path()))}),e.reloadGrid=function(t){e.urlSync||e.serverPagination?o(t):c()},e._gridActions.refresh=e.reloadGrid,e._gridActions.filter=e.filter,e._gridActions.sort=e.sort}]).directive("gridItem",["$compile",function(t){return{restrict:"EA",terminal:!0,scope:!1,link:function(e,i,r,n,a){e.serverPagination?i.attr("ng-repeat","item in filtered"):i.attr("ng-repeat","item in filtered | startFrom:(paginationOptions.currentPage-1)*paginationOptions.itemsPerPage | limitTo:paginationOptions.itemsPerPage track by $index"),i.removeAttr("grid-item");var o=i[0].outerHTML;i.replaceWith(t(o)(e))}}}]).directive("gridData",["$compile","$animate",function(e){return{restrict:"EA",scope:!0,controller:"gridController",link:function(i,r,n){var a=[],o=r.parent(),s=n.id,l="true"===n.serverPagination;i.serverPagination=l,angular.forEach(angular.element(o[0].querySelectorAll("[sortable]")),function(t){var r=angular.element(t),n=r.attr("sortable");r.attr("ng-class","{'sort-ascent' : sortOptions.predicate ==='"+n+"' && sortOptions.direction === 'asc', 'sort-descent' : sortOptions.predicate === '"+n+"' && sortOptions.direction === 'desc'}"),r.attr("ng-click","sort('"+n+"')"),e(r)(i)}),angular.forEach(document.querySelectorAll("[filter-by]"),function(e){var n=angular.element(e),o=n.attr("filter-by"),l=document.querySelectorAll("[grid-data]")[0],c=l.querySelectorAll('[filter-by="'+o+'"]').length>0,p=n.attr("filter-type")||"",d=n.attr("ng-model"),g=n.attr("disable-url");s&&n.attr("grid-id")&&s!=n.attr("grid-id")||("select"!==p||(i[d+"Options"]=t(i.$eval(r.attr("grid-options")+".data"),o)),!~p.indexOf("date")||n.attr("ng-focus")||n.attr("ng-blur")||(n.attr("ng-focus","filter('{"+d+" : this."+d+"}')"),n.attr("ng-blur","filter('{"+d+" : this."+d+"}')")),d||(d=o,n.attr("ng-model",o),n.attr("ng-change","filter()")),a.push({model:d,isInScope:c,filterBy:o,filterType:p,disableUrl:g}))}),i.filters=a}}}]).factory("filtersFactory",function(){function t(t,e,i){return t.filter(function(t){return e&&t[i]?t[i]===e:!0})}function e(t,e,i){return t.filter(function(t){return e&&t[i]?~(t[i]+"").toLowerCase().indexOf((e+"").toLowerCase()):!!t[i]})}function i(t,e,i){return e=new Date(e).getTime(),t.filter(function(t){return e&&t[i]?t[i]<=e+86399999:!0})}function r(t,e,i){return e=new Date(e).getTime(),t.filter(function(t){return e&&t[i]?t[i]>=e:!0})}return{getFilterByType:function(n){switch(n){case"select":return t;case"text":return e;case"dateTo":return i;case"dateFrom":return r;default:return null}}}})}();
\ No newline at end of file
+!function(){"use strict";function t(t,e){var i=[];if(t)return t.forEach(function(t){~i.indexOf(t[e])||i.push(t[e])}),i.map(function(t){return{text:t,value:t}})}angular.module("dataGrid",[]).filter("startFrom",function(){return function(t,e){return t?(e=+e,t.slice(e)):[]}}).controller("gridController",["$scope","$element","$filter","$location","filtersFactory",function(e,i,r,n,a){function o(t){var i,r=!1;i="page="+e.paginationOptions.currentPage,e.paginationOptions.itemsPerPage!==e.defaultsPaginationOptions.itemsPerPage&&(i+="&itemsPerPage="+e.paginationOptions.itemsPerPage),e.sortOptions.predicate&&(i+="&sort="+encodeURIComponent(e.sortOptions.predicate+"-"+e.sortOptions.direction)),e.filters.forEach(function(t){var n=t.model,a=t.isInScope?e.$eval(n):e.$parent.$eval(n);if(t.disableUrl)return void(r=!0);if(a){var o;if(a instanceof Date){if(isNaN(a.getTime()))return;o=a.getFullYear()+"-",o+=a.getMonth()<9?"0"+(a.getMonth()+1)+"-":a.getMonth()+1+"-",o+=a.getDate()<10?"0"+a.getDate():a.getDate(),a=o}i+="&"+encodeURIComponent(n)+"="+encodeURIComponent(a)}}),r&&c(),n.path(i),t&&e.$apply()}function s(){var t=n.path().slice(1),i={},r={};if(e.params=i,t.split("&").forEach(function(t){var e=t.split("=");i[e[0]]=e[1],"page"!==e[0]&&"sort"!==e[0]&&"itemsPerPage"!==e[0]&&(r[decodeURIComponent(e[0])]=decodeURIComponent(e[1]))}),e.filters.forEach(function(t){var i=t.model,n=r[i];if(!t.disableUrl){if(~t.filterType.toLowerCase().indexOf("date"))return e.$parent.__evaltmp=n?new Date(n):null,void e.$parent.$eval(i+"=__evaltmp");"select"!==t.filterType||n||(n=""),n&&(t.isInScope?(e.__evaltmp=n,e.$eval(i+"=__evaltmp")):(e.$parent.__evaltmp=n,e.$parent.$eval(i+"=__evaltmp")))}}),e.paginationOptions.itemsPerPage=e.defaultsPaginationOptions.itemsPerPage,e.paginationOptions.currentPage=e.defaultsPaginationOptions.currentPage,i.itemsPerPage&&(e.paginationOptions.itemsPerPage=i.itemsPerPage),i.page&&(!e.serverPagination&&(i.page-1)*e.paginationOptions.itemsPerPage>e.filtered.length?e.paginationOptions.currentPage=1:e.paginationOptions.currentPage=i.page),i.sort){var a=i.sort.split("-");e.sortOptions.predicate=decodeURIComponent(a[0]),e.sortOptions.direction=decodeURIComponent(a[1])}e.serverPagination||c()}function l(){var t=n.path().slice(1);!t&&e.sortOptions.predicate?e.sort(e.sortOptions.predicate,!0):e._gridOptions.getData("?"+t,function(t,i){e.filtered=t,e.paginationOptions.totalItems=i})}function c(){var t=Date.now(),i=!1;e._time={},e.sortOptions.predicate&&e.sortCache&&e.sortCache.predicate===e.sortOptions.predicate&&e.sortCache.direction===e.sortOptions.direction?(e.filtered=e.sortCache.data.slice(),i=!0):e.filtered=e._gridOptions.data.slice(),e._time.copy=Date.now()-t;var n=Date.now();p(),e._time.filters=Date.now()-n;var a=Date.now();e.sortOptions.predicate&&!i&&(e.filtered=r("orderBy")(e.filtered,e.sortOptions.predicate,"desc"===e.sortOptions.direction),e.sortCache={data:e.filtered.slice(),predicate:e.sortOptions.predicate,direction:e.sortOptions.direction}),e._time.sort=Date.now()-a,e._time.all=Date.now()-t,e.paginationOptions.totalItems=e.filtered.length}function p(){e.filters.forEach(function(t){var i=t.filterBy,r=t.model,n=t.isInScope?e.$eval(r):e.$parent.$eval(r),o=t.filterType;if(e.customFilters[r])e.filtered=e.customFilters[r](e.filtered,n,i);else if(n&&o){var s=a.getFilterByType(o);s&&(e.filtered=s(e.filtered,n,i))}})}e._gridOptions=e.$eval(i.attr("grid-options")),e._gridActions=e.$eval(i.attr("grid-actions")),e.serverPagination="true"===i.attr("server-pagination"),e.getDataDelay=i.attr("get-delay")||350,e._gridActions||(e.$parent.$eval(i.attr("grid-actions")+"= {}"),e._gridActions=e.$parent.$eval(i.attr("grid-actions"))),e._gridOptions.grid=e,e.filtered=e._gridOptions.data.slice(),e.paginationOptions=e._gridOptions.pagination?angular.copy(e._gridOptions.pagination):{},e.defaultsPaginationOptions={itemsPerPage:e.paginationOptions.itemsPerPage||"10",currentPage:e.paginationOptions.currentPage||1},e.paginationOptions=angular.copy(e.defaultsPaginationOptions),e.sortOptions=e._gridOptions.sort?angular.copy(e._gridOptions.sort):{},e.customFilters=e._gridOptions.customFilters?angular.copy(e._gridOptions.customFilters):{},e.urlSync=e._gridOptions.urlSync,e.$watch("_gridOptions.data",function(i){i&&i.length>-1&&(e.sortCache={},e.filtered=e._gridOptions.data.slice(),e.filters.forEach(function(i){"select"===i.filterType&&(e[i.model+"Options"]=t(e.filtered,i.filterBy))}),e.urlSync?s(n.path()):c())}),e.sort=function(t,i){if(!i){var r=e.sortOptions.predicate===t&&"desc"===e.sortOptions.direction?"asc":"desc";e.sortOptions.direction=r,e.sortOptions.predicate=t}e.paginationOptions.currentPage=1,e.reloadGrid(i)},e.filter=function(){e.paginationOptions.currentPage=1,e.reloadGrid()},e.$on("$locationChangeSuccess",function(){(e.urlSync||e.serverPagination)&&(e.serverPagination&&(clearTimeout(e.getDataTimeout),e.getDataTimeout=setTimeout(l,e.getDataDelay)),e.filtered&&s(n.path()))}),e.reloadGrid=function(t){e.urlSync||e.serverPagination?o(t):c()},e._gridActions.refresh=e.reloadGrid,e._gridActions.filter=e.filter,e._gridActions.sort=e.sort}]).directive("gridItem",["$compile",function(t){return{restrict:"EA",terminal:!0,scope:!1,link:function(e,i,r,n,a){e.serverPagination?i.attr("ng-repeat","item in filtered"):i.attr("ng-repeat","item in filtered | startFrom:(paginationOptions.currentPage-1)*paginationOptions.itemsPerPage | limitTo:paginationOptions.itemsPerPage track by $index"),i.removeAttr("grid-item");var o=i[0].outerHTML;i.replaceWith(t(o)(e))}}}]).directive("gridData",["$compile","$animate",function(e){return{restrict:"EA",scope:!0,controller:"gridController",link:function(i,r,n){var a=[],o=r.parent(),s=n.id,l="true"===n.serverPagination;i.serverPagination=l,angular.forEach(angular.element(o[0].querySelectorAll("[sortable]")),function(t){var r=angular.element(t),n=r.attr("sortable");r.attr("ng-class","{'sort-ascent' : sortOptions.predicate ==='"+n+"' && sortOptions.direction === 'asc', 'sort-descent' : sortOptions.predicate === '"+n+"' && sortOptions.direction === 'desc'}"),r.attr("ng-click","sort('"+n+"')"),e(r)(i)}),angular.forEach(document.querySelectorAll("[filter-by]"),function(e){var n=angular.element(e),o=n.attr("filter-by"),l=document.querySelectorAll("[grid-data]")[0],c=l.querySelectorAll('[filter-by="'+o+'"]').length>0,p=n.attr("filter-type")||"",d=n.attr("ng-model"),g=n.attr("disable-url");s&&n.attr("grid-id")&&s!=n.attr("grid-id")||("select"!==p||(i[d+"Options"]=t(i.$eval(r.attr("grid-options")+".data"),o)),!~p.indexOf("date")||n.attr("ng-focus")||n.attr("ng-blur")||(n.attr("ng-focus","filter('{"+d+" : this."+d+"}')"),n.attr("ng-blur","filter('{"+d+" : this."+d+"}')")),d||(d=o,n.attr("ng-model",o),n.attr("ng-change","filter()")),a.push({model:d,isInScope:c,filterBy:o,filterType:p,disableUrl:g}))}),i.filters=a}}}]).factory("filtersFactory",function(){function t(t,e,i){return t.filter(function(t){return!e||!t[i]||t[i]===e})}function e(t,e,i){return t.filter(function(t){return e&&t[i]?~(t[i]+"").toLowerCase().indexOf((e+"").toLowerCase()):!!t[i]})}function i(t,e,i){return e=new Date(e).getTime(),t.filter(function(t){return!e||!t[i]||t[i]<=e+86399999})}function r(t,e,i){return e=new Date(e).getTime(),t.filter(function(t){return!e||!t[i]||t[i]>=e})}return{getFilterByType:function(n){switch(n){case"select":return t;case"text":return e;case"dateTo":return i;case"dateFrom":return r;default:return null}}}})}();
\ No newline at end of file
diff --git a/src/js/dataGrid.js b/src/js/dataGrid.js
index 91a2986..1bc8aef 100644
--- a/src/js/dataGrid.js
+++ b/src/js/dataGrid.js
@@ -38,7 +38,7 @@
             $scope.urlSync = $scope._gridOptions.urlSync;
 
             $scope.$watch('_gridOptions.data', function (newValue) {
-                if (newValue && newValue.length) {
+                if (newValue && newValue.length > -1) {
                     $scope.sortCache = {};
                     $scope.filtered = $scope._gridOptions.data.slice();
                     $scope.filters.forEach(function (filter) {

From 64c877a1afed0e07536381ad1910a2fac04b2395 Mon Sep 17 00:00:00 2001
From: sskozzlovv <sskozzlovv@gmail.com>
Date: Tue, 28 Mar 2017 13:18:28 +0300
Subject: [PATCH 09/39] Update README.md

---
 README.md | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/README.md b/README.md
index 6d87116..6d10e41 100644
--- a/README.md
+++ b/README.md
@@ -8,10 +8,13 @@ Demo Material: http://angular-data-grid.github.io/demo/material/
 
 Demo 100k: http://angular-data-grid.github.io/demo/100k/
 
+Demo Angular UI Router: http://angular-data-grid.github.io/demo/bootstrap/ui-router.html
+
 ### Features
  - Does not have any hard-coded template so you can choose any mark-up you need, from basic `<table>` layout to any `<div>` structure.
  - Easily switch between the most popular Bootstrap and Google Material theming, or apply your own CSS theme just by changing several CSS classes.
  - Built-in sync with browser address bar (URL), so you can copy-n-paste sorting/filtering/pagination results URL and open it in other browser / send to anyone - even if pagination / filtering are done on a client-side. 
+ - Support of [Angular UI Router](https://github.com/angular-ui/ui-router) navigation. 
  - Unlike most part of other Angular DataGrids, we intentionally use non-isolated scope of the directive to maximize flexibility, so it can be easily synchronized with any data changes inside your controller. 
  NOTE! With great power comes great responsibility, so use non-isolated API wisely.
 

From 419d9556f9851161f3e43ddee5d3ecb4e9f33b8a Mon Sep 17 00:00:00 2001
From: skozlov <sergey.kozlovich@landsend.com>
Date: Tue, 28 Mar 2017 14:07:49 +0300
Subject: [PATCH 10/39] UI Router plus server pagination - fixed #20

---
 demo/bootstrap/index.html                     |   3 +
 .../bootstrap/js/routerServerPaginationApp.js |  60 ++++++
 demo/bootstrap/ui-router.html                 |  54 ++++++
 .../views/router-server-pagination.html       | 174 ++++++++++++++++++
 dist/dataGrid.js                              |  53 +++---
 dist/dataGrid.min.js                          |   2 +-
 src/js/dataGrid.js                            |  53 +++---
 7 files changed, 352 insertions(+), 47 deletions(-)
 create mode 100644 demo/bootstrap/js/routerServerPaginationApp.js
 create mode 100644 demo/bootstrap/ui-router.html
 create mode 100644 demo/bootstrap/views/router-server-pagination.html

diff --git a/demo/bootstrap/index.html b/demo/bootstrap/index.html
index 8329619..b0919de 100644
--- a/demo/bootstrap/index.html
+++ b/demo/bootstrap/index.html
@@ -45,6 +45,9 @@ <h4>Additional Demos</h4>
         <li>
             <a href="server-pagination.html" target="_blank">Server pagination</a>
         </li>
+        <li>
+            <a href="ui-router.html" target="_blank">UI Router plus server pagination</a>
+        </li>
     </ul>
     <hr>
     <div class="row">
diff --git a/demo/bootstrap/js/routerServerPaginationApp.js b/demo/bootstrap/js/routerServerPaginationApp.js
new file mode 100644
index 0000000..e8b28a8
--- /dev/null
+++ b/demo/bootstrap/js/routerServerPaginationApp.js
@@ -0,0 +1,60 @@
+(function () {
+    'use strict';
+
+    angular
+        .module('myApp', ['ui.bootstrap', 'dataGrid', 'pagination', 'ui.router', 'angular-loading-bar'])
+        .config(config)
+        .factory('myAppFactory', MyAppFactory);
+
+    config.$inject = ['$stateProvider', '$urlRouterProvider', '$locationProvider'];
+    MyAppController.$inject = ['$scope', 'myAppFactory', '$state'];
+    MyAppFactory.$inject = ['$http'];
+
+
+    function config($stateProvider, $urlRouterProvider, $locationProvider) {
+        //$locationProvider.html5Mode(true);
+
+        $urlRouterProvider.otherwise('/orders');
+
+        $stateProvider
+            .state('orders', {
+                url: '/orders',
+                templateUrl: 'views/router-server-pagination.html',
+                controller: MyAppController
+            })
+    }
+
+    function MyAppController($scope, myAppFactory, $state) {
+
+        $scope.gridOptions = {
+            data: [],
+            getData: myAppFactory.getOrdersData,
+            sort: {
+                predicate: 'orderNo',
+                direction: 'asc'
+            }
+        };
+        $scope.gridActions = {};
+        myAppFactory.getStatuses().then(function (resp) {
+            $scope.UI.statusOptions = resp.data;
+        })
+    }
+
+    function MyAppFactory($http) {
+        var herokuDomain = 'https://server-pagination.herokuapp.com';
+        return {
+            getOrdersData: getOrdersData,
+            getStatuses: getStatuses
+        };
+
+        function getOrdersData(params, callback) {
+            $http.get(herokuDomain + '/orders' + params).then(function (response) {
+                callback(response.data.orders, response.data.ordersCount);
+            });
+        }
+
+        function getStatuses() {
+            return $http.get(herokuDomain + '/orders/statuses');
+        }
+    }
+})();
diff --git a/demo/bootstrap/ui-router.html b/demo/bootstrap/ui-router.html
new file mode 100644
index 0000000..139b239
--- /dev/null
+++ b/demo/bootstrap/ui-router.html
@@ -0,0 +1,54 @@
+<!-- index.html -->
+<!doctype html>
+
+<html ng-app="myApp">
+<head>
+    <style>
+        .sortable:after {
+            font: 14px/1 FontAwesome;
+            content: "\f0dc";
+        }
+
+        .sortable.sort-ascent:after {
+            content: '\f0de';
+            vertical-align: bottom;
+        }
+
+        .sortable.sort-descent:after {
+            content: "\f0dd";
+            vertical-align: top;
+        }
+    </style>
+    <!--<base href="/angular-data-grid/demo/bootstrap/"/>-->
+    <link rel="icon" href="https://angularjs.org/favicon.ico" type="image/x-icon">
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
+    <link rel="stylesheet" href="css/angular-data-grid.bootstrap.css">
+    <link rel="stylesheet" href="css/loading-bar.min.css">
+</head>
+
+<body>
+<nav class="navbar navbar-inverse">
+    <div class="container">
+        <a href="#" class="navbar-brand">Angular Data Grid - UI Router Server Pagination Example</a>
+        <ul class="nav navbar-nav navbar-right">
+            <li><a href="../bootstrap/">Back to main demo</a></li>
+        </ul>
+    </div>
+</nav>
+<div ui-view></div>
+</body>
+
+<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script><!-- load jquery -->
+<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
+<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-animate.min.js"></script>
+<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-aria.min.js"></script>
+<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-messages.min.js"></script>
+<script src="https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.js"></script>
+<script src="//unpkg.com/angular-ui-router/release/angular-ui-router.min.js"></script>
+
+<script src="../../dist/pagination.min.js"></script>
+<script src="../../dist/dataGrid.min.js"></script>
+<script src="../../dist/loading-bar.min.js"></script>
+<script src="js/routerServerPaginationApp.js"></script>
+</html>
\ No newline at end of file
diff --git a/demo/bootstrap/views/router-server-pagination.html b/demo/bootstrap/views/router-server-pagination.html
new file mode 100644
index 0000000..d916b5f
--- /dev/null
+++ b/demo/bootstrap/views/router-server-pagination.html
@@ -0,0 +1,174 @@
+<div class="container">
+    <div class="margin-bottom-basic">
+        <h3>Angular Data Grid - UI Router Server Pagination.</h3>
+        UI Router plus all features for server pagination<br/>
+        Features enabled: sorting, filtering (using both in-grid and external controls), pagination and items-per-page functionality.
+        Angular UI Datepicker used for date controls, although you can use any other framework, plugin or styling.
+        <a href="https://github.com/angular-data-grid/angular-data-grid.github.io" target="_blank">Project GitHub</a>
+    </div>
+    <hr>
+    <div class="row">
+        <div>
+            <div class="col-md-4">
+                <div class="form-group">
+                    <label for="orderIdFilter">Search by Order #</label>
+                    <input id="orderIdFilter" type="text" class="form-control order-search-box"
+                           placeholder="Enter Order #"
+                           ng-change="gridActions.filter()"
+                           ng-model="orderNo"
+                           filter-by="orderNo"
+                           filter-type="text">
+                </div>
+            </div>
+            <div class="col-md-4">
+                <div class="form-group">
+                    <label for="dateFromFilter">Date From</label>
+
+                    <div class="input-group">
+                        <input type="text"
+                               id="dateFromFilter"
+                               class="form-control"
+                               uib-datepicker-popup="dd/MM/yyyy"
+                               placeholder="DD/MM/YYYY"
+                               max-date="dateTo"
+                               close-text="Close"
+                               ng-model="dateFrom"
+                               show-weeks="true"
+                               is-open="dateFromOpened"
+                               ng-click="dateFromOpened = true"
+                               filter-by="placed"
+                               filter-type="dateFrom"
+                               ng-blur="gridActions.filter()"
+                               ng-focus="gridActions.filter()"
+                               show-weeks="false"
+                               close-text="Close"/>
+           <span class="input-group-btn">
+                            <label for="dateFromFilter" class="btn btn-default">
+                                <i class="fa fa-calendar"></i></label>
+                          </span>
+                    </div>
+                </div>
+            </div>
+            <div class="col-md-4">
+                <div class="form-group">
+                    <label for="dateToInput">Date To</label>
+
+                    <div class="input-group">
+                        <input type="text"
+                               id="dateToInput"
+                               class="form-control"
+                               uib-datepicker-popup="dd/MM/yyyy"
+                               placeholder="DD/MM/YYYY"
+                               min-date="dateFrom"
+                               close-text="Close"
+                               ng-model="dateTo"
+                               show-weeks="true"
+                               is-open="dateToOpened"
+                               ng-click="dateToOpened = true"
+                               filter-by="placed"
+                               filter-type="dateTo"
+                               ng-blur="gridActions.filter()"
+                               ng-focus="gridActions.filter()"
+                               show-weeks="false"
+                               close-text="Close">
+                 <span class="input-group-btn">
+                            <label for="dateToInput" class="btn btn-default">
+                                <i class="fa fa-calendar"></i></label>
+                          </span>
+                    </div>
+                </div>
+                <div ng-show="dateTo || dateFrom" class="buttons-right">
+                    <a href="" ng-click="dateTo = ''; dateFrom = ''; gridActions.refresh();">Clear Dates</a>
+                </div>
+            </div>
+        </div>
+    </div>
+
+
+    <div grid-data grid-options="gridOptions" grid-actions="gridActions" server-pagination="true">
+        <div class="row">
+            <div class="col-md-3"><span class="items">{{paginationOptions.totalItems}} items total</span></div>
+            <div class="col-md-9 text-right">
+                <form class="form-inline margin-bottom-basic">
+                    <div class="form-group">
+                        <div grid-pagination boundary-links="true"
+                             ng-if="paginationOptions.totalItems  > paginationOptions.itemsPerPage"
+                             total-items="paginationOptions.totalItems"
+                             ng-model="paginationOptions.currentPage"
+                             ng-change="reloadGrid()"
+                             class="pagination-sm"
+                             items-per-page="paginationOptions.itemsPerPage">
+                        </div>
+                    </div>
+                    <div class="form-group items-per-page">
+                        <label for="itemsOnPageSelect1">Items per page:</label>
+                        <select id="itemsOnPageSelect1" class="form-control input-sm" ng-init="paginationOptions.itemsPerPage = '10'" ng-model="paginationOptions.itemsPerPage"
+                                ng-change="reloadGrid()">
+                            <option>5</option>
+                            <option>10</option>
+                            <option>50</option>
+                            <option>75</option>
+                        </select>
+                    </div>
+                </form>
+            </div>
+        </div>
+
+        <table class="table table-bordered">
+            <thead>
+            <tr>
+                <th width="30%" sortable="orderNo" class="sortable">Order #</th>
+                <th width="30%" sortable="datePlaced" class="sortable">Date Placed</th>
+                <th class="st-sort-disable th-dropdown">
+                    <select class="form-control width-15"
+                            filter-by="status"
+                            filter-type="select"
+                            ng-model="status"
+                            ng-change="filter()">
+                        <option value="">All Statuses</option>
+                        <option ng-repeat="option in UI.statusOptions track by option.value"
+                                value="{{option.value}}">{{option.text}}
+                        </option>
+                    </select>
+                </th>
+                <th sortable="total" class="sortable">Total</th>
+            </tr>
+            </thead>
+            <tbody>
+            <tr grid-item>
+                <td>{{item.orderNo}}</td>
+                <td>{{item.datePlaced | date:'MM/dd/yyyy'}}</td>
+                <td>{{item.status}}</td>
+                <td>{{item.total}}</td>
+            </tr>
+            </tbody>
+        </table>
+        <div class="row">
+            <div class="col-md-3"><span class="items">{{paginationOptions.totalItems}} items total</span></div>
+            <div class="col-md-9 text-right">
+                <form class="form-inline margin-bottom-basic">
+                    <div class="form-group">
+                        <div grid-pagination boundary-links="true"
+                             ng-if="paginationOptions.totalItems  > paginationOptions.itemsPerPage"
+                             total-items="paginationOptions.totalItems"
+                             ng-model="paginationOptions.currentPage"
+                             ng-change="reloadGrid()"
+                             class="pagination-sm"
+                             items-per-page="paginationOptions.itemsPerPage">
+                        </div>
+                    </div>
+                    <div class="form-group items-per-page">
+                        <label for="itemsOnPageSelect">Items per page:</label>
+                        <select id="itemsOnPageSelect" class="form-control input-sm" ng-init="paginationOptions.itemsPerPage = '10'" ng-model="paginationOptions.itemsPerPage"
+                                ng-change="reloadGrid()">
+                            <option>5</option>
+                            <option>10</option>
+                            <option>50</option>
+                            <option>75</option>
+                        </select>
+                    </div>
+                </form>
+            </div>
+        </div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/dist/dataGrid.js b/dist/dataGrid.js
index 1bc8aef..1ae356c 100644
--- a/dist/dataGrid.js
+++ b/dist/dataGrid.js
@@ -48,7 +48,7 @@
                     });
 
                     if ($scope.urlSync) {
-                        parseUrl($location.path());
+                        parseUrl();
                     } else {
                         applyFilters();
                     }
@@ -71,15 +71,11 @@
             };
 
             $scope.$on('$locationChangeSuccess', function () {
-                if ($scope.urlSync || $scope.serverPagination) {
-                    if ($scope.serverPagination) {
-                        clearTimeout($scope.getDataTimeout);
-                        $scope.getDataTimeout = setTimeout(getData, $scope.getDataDelay);
-                    }
-                    if ($scope.filtered) {
-                        parseUrl($location.path());
-                    }
-                }
+                onChangeStateOrLocation()
+            });
+
+            $scope.$on("$stateChangeSuccess", function (event, toState) {
+                onChangeStateOrLocation()
             });
 
             $scope.reloadGrid = function (isDefaultSort) {
@@ -94,6 +90,18 @@
             $scope._gridActions.filter = $scope.filter;
             $scope._gridActions.sort = $scope.sort;
 
+            function onChangeStateOrLocation(){
+                if ($scope.urlSync || $scope.serverPagination) {
+                    if ($scope.serverPagination) {
+                        clearTimeout($scope.getDataTimeout);
+                        $scope.getDataTimeout = setTimeout(getData, $scope.getDataDelay);
+                    }
+                    if ($scope.filtered) {
+                        parseUrl();
+                    }
+                }
+            }
+
             function changePath(isDefaultSort) {
                 var path, needApplyFilters = false;
 
@@ -134,27 +142,21 @@
                 if (needApplyFilters) {
                     applyFilters();
                 }
-                $location.path(path);
+                $location.search(path);
                 if (isDefaultSort) {
                     $scope.$apply();
                 }
             }
 
             function parseUrl() {
-                var url = $location.path().slice(1),
-                    params = {},
+                var params = $location.search(),
                     customParams = {};
 
-                $scope.params = params;
-
-                url.split('&').forEach(function (urlParam) {
-                        var param = urlParam.split('=');
-                        params[param[0]] = param[1];
-                        if (param[0] !== 'page' && param[0] !== 'sort' && param[0] !== 'itemsPerPage') {
-                            customParams[decodeURIComponent(param[0])] = decodeURIComponent(param[1]);
-                        }
+                Object.keys(params).forEach(function(key) {
+                    if (key !== 'page' && key !== 'sort' && key !== 'itemsPerPage') {
+                        customParams[key] = params[key];
                     }
-                );
+                });
 
                 //custom filters
                 $scope.filters.forEach(function (filter) {
@@ -216,7 +218,12 @@
             }
 
             function getData() {
-                var url = $location.path().slice(1);
+                var url = '';
+                var params = $location.search();
+                Object.keys(params).forEach(function(key) {
+                    url += key + '=' + params[key] + '&';
+                });
+                url = url.slice(0, -1);
                 if (!url && $scope.sortOptions.predicate) {
                     $scope.sort($scope.sortOptions.predicate, true);
                 } else {
diff --git a/dist/dataGrid.min.js b/dist/dataGrid.min.js
index 9bf1cd2..c0ba104 100644
--- a/dist/dataGrid.min.js
+++ b/dist/dataGrid.min.js
@@ -1 +1 @@
-!function(){"use strict";function t(t,e){var i=[];if(t)return t.forEach(function(t){~i.indexOf(t[e])||i.push(t[e])}),i.map(function(t){return{text:t,value:t}})}angular.module("dataGrid",[]).filter("startFrom",function(){return function(t,e){return t?(e=+e,t.slice(e)):[]}}).controller("gridController",["$scope","$element","$filter","$location","filtersFactory",function(e,i,r,n,a){function o(t){var i,r=!1;i="page="+e.paginationOptions.currentPage,e.paginationOptions.itemsPerPage!==e.defaultsPaginationOptions.itemsPerPage&&(i+="&itemsPerPage="+e.paginationOptions.itemsPerPage),e.sortOptions.predicate&&(i+="&sort="+encodeURIComponent(e.sortOptions.predicate+"-"+e.sortOptions.direction)),e.filters.forEach(function(t){var n=t.model,a=t.isInScope?e.$eval(n):e.$parent.$eval(n);if(t.disableUrl)return void(r=!0);if(a){var o;if(a instanceof Date){if(isNaN(a.getTime()))return;o=a.getFullYear()+"-",o+=a.getMonth()<9?"0"+(a.getMonth()+1)+"-":a.getMonth()+1+"-",o+=a.getDate()<10?"0"+a.getDate():a.getDate(),a=o}i+="&"+encodeURIComponent(n)+"="+encodeURIComponent(a)}}),r&&c(),n.path(i),t&&e.$apply()}function s(){var t=n.path().slice(1),i={},r={};if(e.params=i,t.split("&").forEach(function(t){var e=t.split("=");i[e[0]]=e[1],"page"!==e[0]&&"sort"!==e[0]&&"itemsPerPage"!==e[0]&&(r[decodeURIComponent(e[0])]=decodeURIComponent(e[1]))}),e.filters.forEach(function(t){var i=t.model,n=r[i];if(!t.disableUrl){if(~t.filterType.toLowerCase().indexOf("date"))return e.$parent.__evaltmp=n?new Date(n):null,void e.$parent.$eval(i+"=__evaltmp");"select"!==t.filterType||n||(n=""),n&&(t.isInScope?(e.__evaltmp=n,e.$eval(i+"=__evaltmp")):(e.$parent.__evaltmp=n,e.$parent.$eval(i+"=__evaltmp")))}}),e.paginationOptions.itemsPerPage=e.defaultsPaginationOptions.itemsPerPage,e.paginationOptions.currentPage=e.defaultsPaginationOptions.currentPage,i.itemsPerPage&&(e.paginationOptions.itemsPerPage=i.itemsPerPage),i.page&&(!e.serverPagination&&(i.page-1)*e.paginationOptions.itemsPerPage>e.filtered.length?e.paginationOptions.currentPage=1:e.paginationOptions.currentPage=i.page),i.sort){var a=i.sort.split("-");e.sortOptions.predicate=decodeURIComponent(a[0]),e.sortOptions.direction=decodeURIComponent(a[1])}e.serverPagination||c()}function l(){var t=n.path().slice(1);!t&&e.sortOptions.predicate?e.sort(e.sortOptions.predicate,!0):e._gridOptions.getData("?"+t,function(t,i){e.filtered=t,e.paginationOptions.totalItems=i})}function c(){var t=Date.now(),i=!1;e._time={},e.sortOptions.predicate&&e.sortCache&&e.sortCache.predicate===e.sortOptions.predicate&&e.sortCache.direction===e.sortOptions.direction?(e.filtered=e.sortCache.data.slice(),i=!0):e.filtered=e._gridOptions.data.slice(),e._time.copy=Date.now()-t;var n=Date.now();p(),e._time.filters=Date.now()-n;var a=Date.now();e.sortOptions.predicate&&!i&&(e.filtered=r("orderBy")(e.filtered,e.sortOptions.predicate,"desc"===e.sortOptions.direction),e.sortCache={data:e.filtered.slice(),predicate:e.sortOptions.predicate,direction:e.sortOptions.direction}),e._time.sort=Date.now()-a,e._time.all=Date.now()-t,e.paginationOptions.totalItems=e.filtered.length}function p(){e.filters.forEach(function(t){var i=t.filterBy,r=t.model,n=t.isInScope?e.$eval(r):e.$parent.$eval(r),o=t.filterType;if(e.customFilters[r])e.filtered=e.customFilters[r](e.filtered,n,i);else if(n&&o){var s=a.getFilterByType(o);s&&(e.filtered=s(e.filtered,n,i))}})}e._gridOptions=e.$eval(i.attr("grid-options")),e._gridActions=e.$eval(i.attr("grid-actions")),e.serverPagination="true"===i.attr("server-pagination"),e.getDataDelay=i.attr("get-delay")||350,e._gridActions||(e.$parent.$eval(i.attr("grid-actions")+"= {}"),e._gridActions=e.$parent.$eval(i.attr("grid-actions"))),e._gridOptions.grid=e,e.filtered=e._gridOptions.data.slice(),e.paginationOptions=e._gridOptions.pagination?angular.copy(e._gridOptions.pagination):{},e.defaultsPaginationOptions={itemsPerPage:e.paginationOptions.itemsPerPage||"10",currentPage:e.paginationOptions.currentPage||1},e.paginationOptions=angular.copy(e.defaultsPaginationOptions),e.sortOptions=e._gridOptions.sort?angular.copy(e._gridOptions.sort):{},e.customFilters=e._gridOptions.customFilters?angular.copy(e._gridOptions.customFilters):{},e.urlSync=e._gridOptions.urlSync,e.$watch("_gridOptions.data",function(i){i&&i.length>-1&&(e.sortCache={},e.filtered=e._gridOptions.data.slice(),e.filters.forEach(function(i){"select"===i.filterType&&(e[i.model+"Options"]=t(e.filtered,i.filterBy))}),e.urlSync?s(n.path()):c())}),e.sort=function(t,i){if(!i){var r=e.sortOptions.predicate===t&&"desc"===e.sortOptions.direction?"asc":"desc";e.sortOptions.direction=r,e.sortOptions.predicate=t}e.paginationOptions.currentPage=1,e.reloadGrid(i)},e.filter=function(){e.paginationOptions.currentPage=1,e.reloadGrid()},e.$on("$locationChangeSuccess",function(){(e.urlSync||e.serverPagination)&&(e.serverPagination&&(clearTimeout(e.getDataTimeout),e.getDataTimeout=setTimeout(l,e.getDataDelay)),e.filtered&&s(n.path()))}),e.reloadGrid=function(t){e.urlSync||e.serverPagination?o(t):c()},e._gridActions.refresh=e.reloadGrid,e._gridActions.filter=e.filter,e._gridActions.sort=e.sort}]).directive("gridItem",["$compile",function(t){return{restrict:"EA",terminal:!0,scope:!1,link:function(e,i,r,n,a){e.serverPagination?i.attr("ng-repeat","item in filtered"):i.attr("ng-repeat","item in filtered | startFrom:(paginationOptions.currentPage-1)*paginationOptions.itemsPerPage | limitTo:paginationOptions.itemsPerPage track by $index"),i.removeAttr("grid-item");var o=i[0].outerHTML;i.replaceWith(t(o)(e))}}}]).directive("gridData",["$compile","$animate",function(e){return{restrict:"EA",scope:!0,controller:"gridController",link:function(i,r,n){var a=[],o=r.parent(),s=n.id,l="true"===n.serverPagination;i.serverPagination=l,angular.forEach(angular.element(o[0].querySelectorAll("[sortable]")),function(t){var r=angular.element(t),n=r.attr("sortable");r.attr("ng-class","{'sort-ascent' : sortOptions.predicate ==='"+n+"' && sortOptions.direction === 'asc', 'sort-descent' : sortOptions.predicate === '"+n+"' && sortOptions.direction === 'desc'}"),r.attr("ng-click","sort('"+n+"')"),e(r)(i)}),angular.forEach(document.querySelectorAll("[filter-by]"),function(e){var n=angular.element(e),o=n.attr("filter-by"),l=document.querySelectorAll("[grid-data]")[0],c=l.querySelectorAll('[filter-by="'+o+'"]').length>0,p=n.attr("filter-type")||"",d=n.attr("ng-model"),g=n.attr("disable-url");s&&n.attr("grid-id")&&s!=n.attr("grid-id")||("select"!==p||(i[d+"Options"]=t(i.$eval(r.attr("grid-options")+".data"),o)),!~p.indexOf("date")||n.attr("ng-focus")||n.attr("ng-blur")||(n.attr("ng-focus","filter('{"+d+" : this."+d+"}')"),n.attr("ng-blur","filter('{"+d+" : this."+d+"}')")),d||(d=o,n.attr("ng-model",o),n.attr("ng-change","filter()")),a.push({model:d,isInScope:c,filterBy:o,filterType:p,disableUrl:g}))}),i.filters=a}}}]).factory("filtersFactory",function(){function t(t,e,i){return t.filter(function(t){return!e||!t[i]||t[i]===e})}function e(t,e,i){return t.filter(function(t){return e&&t[i]?~(t[i]+"").toLowerCase().indexOf((e+"").toLowerCase()):!!t[i]})}function i(t,e,i){return e=new Date(e).getTime(),t.filter(function(t){return!e||!t[i]||t[i]<=e+86399999})}function r(t,e,i){return e=new Date(e).getTime(),t.filter(function(t){return!e||!t[i]||t[i]>=e})}return{getFilterByType:function(n){switch(n){case"select":return t;case"text":return e;case"dateTo":return i;case"dateFrom":return r;default:return null}}}})}();
\ No newline at end of file
+!function(){"use strict";function t(t,e){var i=[];return t?(t.forEach(function(t){~i.indexOf(t[e])||i.push(t[e])}),i.map(function(t){return{text:t,value:t}})):void 0}angular.module("dataGrid",[]).filter("startFrom",function(){return function(t,e){return t?(e=+e,t.slice(e)):[]}}).controller("gridController",["$scope","$element","$filter","$location","filtersFactory",function(e,i,r,n,a){function o(){(e.urlSync||e.serverPagination)&&(e.serverPagination&&(clearTimeout(e.getDataTimeout),e.getDataTimeout=setTimeout(l,e.getDataDelay)),e.filtered&&c())}function s(t){var i,r=!1;i="page="+e.paginationOptions.currentPage,e.paginationOptions.itemsPerPage!==e.defaultsPaginationOptions.itemsPerPage&&(i+="&itemsPerPage="+e.paginationOptions.itemsPerPage),e.sortOptions.predicate&&(i+="&sort="+encodeURIComponent(e.sortOptions.predicate+"-"+e.sortOptions.direction)),e.filters.forEach(function(t){var n=t.model,a=t.isInScope?e.$eval(n):e.$parent.$eval(n);if(t.disableUrl)return void(r=!0);if(a){var o;if(a instanceof Date){if(isNaN(a.getTime()))return;o=a.getFullYear()+"-",o+=a.getMonth()<9?"0"+(a.getMonth()+1)+"-":a.getMonth()+1+"-",o+=a.getDate()<10?"0"+a.getDate():a.getDate(),a=o}i+="&"+encodeURIComponent(n)+"="+encodeURIComponent(a)}}),r&&p(),n.search(i),t&&e.$apply()}function c(){var t=n.search(),i={};if(Object.keys(t).forEach(function(e){"page"!==e&&"sort"!==e&&"itemsPerPage"!==e&&(i[e]=t[e])}),e.filters.forEach(function(t){var r=t.model,n=i[r];if(!t.disableUrl){if(~t.filterType.toLowerCase().indexOf("date"))return e.$parent.__evaltmp=n?new Date(n):null,void e.$parent.$eval(r+"=__evaltmp");"select"!==t.filterType||n||(n=""),n&&(t.isInScope?(e.__evaltmp=n,e.$eval(r+"=__evaltmp")):(e.$parent.__evaltmp=n,e.$parent.$eval(r+"=__evaltmp")))}}),e.paginationOptions.itemsPerPage=e.defaultsPaginationOptions.itemsPerPage,e.paginationOptions.currentPage=e.defaultsPaginationOptions.currentPage,t.itemsPerPage&&(e.paginationOptions.itemsPerPage=t.itemsPerPage),t.page&&(!e.serverPagination&&(t.page-1)*e.paginationOptions.itemsPerPage>e.filtered.length?e.paginationOptions.currentPage=1:e.paginationOptions.currentPage=t.page),t.sort){var r=t.sort.split("-");e.sortOptions.predicate=decodeURIComponent(r[0]),e.sortOptions.direction=decodeURIComponent(r[1])}e.serverPagination||p()}function l(){var t="",i=n.search();Object.keys(i).forEach(function(e){t+=e+"="+i[e]+"&"}),t=t.slice(0,-1),!t&&e.sortOptions.predicate?e.sort(e.sortOptions.predicate,!0):e._gridOptions.getData("?"+t,function(t,i){e.filtered=t,e.paginationOptions.totalItems=i})}function p(){var t=Date.now(),i=!1;e._time={},e.sortOptions.predicate&&e.sortCache&&e.sortCache.predicate===e.sortOptions.predicate&&e.sortCache.direction===e.sortOptions.direction?(e.filtered=e.sortCache.data.slice(),i=!0):e.filtered=e._gridOptions.data.slice(),e._time.copy=Date.now()-t;var n=Date.now();d(),e._time.filters=Date.now()-n;var a=Date.now();e.sortOptions.predicate&&!i&&(e.filtered=r("orderBy")(e.filtered,e.sortOptions.predicate,"desc"===e.sortOptions.direction),e.sortCache={data:e.filtered.slice(),predicate:e.sortOptions.predicate,direction:e.sortOptions.direction}),e._time.sort=Date.now()-a,e._time.all=Date.now()-t,e.paginationOptions.totalItems=e.filtered.length}function d(){e.filters.forEach(function(t){var i=t.filterBy,r=t.model,n=t.isInScope?e.$eval(r):e.$parent.$eval(r),o=t.filterType;if(e.customFilters[r])e.filtered=e.customFilters[r](e.filtered,n,i);else if(n&&o){var s=a.getFilterByType(o);s&&(e.filtered=s(e.filtered,n,i))}})}e._gridOptions=e.$eval(i.attr("grid-options")),e._gridActions=e.$eval(i.attr("grid-actions")),e.serverPagination="true"===i.attr("server-pagination"),e.getDataDelay=i.attr("get-delay")||350,e._gridActions||(e.$parent.$eval(i.attr("grid-actions")+"= {}"),e._gridActions=e.$parent.$eval(i.attr("grid-actions"))),e._gridOptions.grid=e,e.filtered=e._gridOptions.data.slice(),e.paginationOptions=e._gridOptions.pagination?angular.copy(e._gridOptions.pagination):{},e.defaultsPaginationOptions={itemsPerPage:e.paginationOptions.itemsPerPage||"10",currentPage:e.paginationOptions.currentPage||1},e.paginationOptions=angular.copy(e.defaultsPaginationOptions),e.sortOptions=e._gridOptions.sort?angular.copy(e._gridOptions.sort):{},e.customFilters=e._gridOptions.customFilters?angular.copy(e._gridOptions.customFilters):{},e.urlSync=e._gridOptions.urlSync,e.$watch("_gridOptions.data",function(i){i&&i.length>-1&&(e.sortCache={},e.filtered=e._gridOptions.data.slice(),e.filters.forEach(function(i){"select"===i.filterType&&(e[i.model+"Options"]=t(e.filtered,i.filterBy))}),e.urlSync?c():p())}),e.sort=function(t,i){if(!i){var r=e.sortOptions.predicate===t&&"desc"===e.sortOptions.direction?"asc":"desc";e.sortOptions.direction=r,e.sortOptions.predicate=t}e.paginationOptions.currentPage=1,e.reloadGrid(i)},e.filter=function(){e.paginationOptions.currentPage=1,e.reloadGrid()},e.$on("$locationChangeSuccess",function(){o()}),e.$on("$stateChangeSuccess",function(t,e){o()}),e.reloadGrid=function(t){e.urlSync||e.serverPagination?s(t):p()},e._gridActions.refresh=e.reloadGrid,e._gridActions.filter=e.filter,e._gridActions.sort=e.sort}]).directive("gridItem",["$compile",function(t){return{restrict:"EA",terminal:!0,scope:!1,link:function(e,i,r,n,a){e.serverPagination?i.attr("ng-repeat","item in filtered"):i.attr("ng-repeat","item in filtered | startFrom:(paginationOptions.currentPage-1)*paginationOptions.itemsPerPage | limitTo:paginationOptions.itemsPerPage track by $index"),i.removeAttr("grid-item");var o=i[0].outerHTML;i.replaceWith(t(o)(e))}}}]).directive("gridData",["$compile","$animate",function(e){return{restrict:"EA",scope:!0,controller:"gridController",link:function(i,r,n){var a=[],o=r.parent(),s=n.id,c="true"===n.serverPagination;i.serverPagination=c,angular.forEach(angular.element(o[0].querySelectorAll("[sortable]")),function(t){var r=angular.element(t),n=r.attr("sortable");r.attr("ng-class","{'sort-ascent' : sortOptions.predicate ==='"+n+"' && sortOptions.direction === 'asc', 'sort-descent' : sortOptions.predicate === '"+n+"' && sortOptions.direction === 'desc'}"),r.attr("ng-click","sort('"+n+"')"),e(r)(i)}),angular.forEach(document.querySelectorAll("[filter-by]"),function(e){var n=angular.element(e),o=n.attr("filter-by"),c=document.querySelectorAll("[grid-data]")[0],l=c.querySelectorAll('[filter-by="'+o+'"]').length>0,p=n.attr("filter-type")||"",d=n.attr("ng-model"),g=n.attr("disable-url");s&&n.attr("grid-id")&&s!=n.attr("grid-id")||("select"!==p||(i[d+"Options"]=t(i.$eval(r.attr("grid-options")+".data"),o)),!~p.indexOf("date")||n.attr("ng-focus")||n.attr("ng-blur")||(n.attr("ng-focus","filter('{"+d+" : this."+d+"}')"),n.attr("ng-blur","filter('{"+d+" : this."+d+"}')")),d||(d=o,n.attr("ng-model",o),n.attr("ng-change","filter()")),a.push({model:d,isInScope:l,filterBy:o,filterType:p,disableUrl:g}))}),i.filters=a}}}]).factory("filtersFactory",function(){function t(t,e,i){return t.filter(function(t){return e&&t[i]?t[i]===e:!0})}function e(t,e,i){return t.filter(function(t){return e&&t[i]?~(t[i]+"").toLowerCase().indexOf((e+"").toLowerCase()):!!t[i]})}function i(t,e,i){return e=new Date(e).getTime(),t.filter(function(t){return e&&t[i]?t[i]<=e+86399999:!0})}function r(t,e,i){return e=new Date(e).getTime(),t.filter(function(t){return e&&t[i]?t[i]>=e:!0})}return{getFilterByType:function(n){switch(n){case"select":return t;case"text":return e;case"dateTo":return i;case"dateFrom":return r;default:return null}}}})}();
\ No newline at end of file
diff --git a/src/js/dataGrid.js b/src/js/dataGrid.js
index 1bc8aef..1ae356c 100644
--- a/src/js/dataGrid.js
+++ b/src/js/dataGrid.js
@@ -48,7 +48,7 @@
                     });
 
                     if ($scope.urlSync) {
-                        parseUrl($location.path());
+                        parseUrl();
                     } else {
                         applyFilters();
                     }
@@ -71,15 +71,11 @@
             };
 
             $scope.$on('$locationChangeSuccess', function () {
-                if ($scope.urlSync || $scope.serverPagination) {
-                    if ($scope.serverPagination) {
-                        clearTimeout($scope.getDataTimeout);
-                        $scope.getDataTimeout = setTimeout(getData, $scope.getDataDelay);
-                    }
-                    if ($scope.filtered) {
-                        parseUrl($location.path());
-                    }
-                }
+                onChangeStateOrLocation()
+            });
+
+            $scope.$on("$stateChangeSuccess", function (event, toState) {
+                onChangeStateOrLocation()
             });
 
             $scope.reloadGrid = function (isDefaultSort) {
@@ -94,6 +90,18 @@
             $scope._gridActions.filter = $scope.filter;
             $scope._gridActions.sort = $scope.sort;
 
+            function onChangeStateOrLocation(){
+                if ($scope.urlSync || $scope.serverPagination) {
+                    if ($scope.serverPagination) {
+                        clearTimeout($scope.getDataTimeout);
+                        $scope.getDataTimeout = setTimeout(getData, $scope.getDataDelay);
+                    }
+                    if ($scope.filtered) {
+                        parseUrl();
+                    }
+                }
+            }
+
             function changePath(isDefaultSort) {
                 var path, needApplyFilters = false;
 
@@ -134,27 +142,21 @@
                 if (needApplyFilters) {
                     applyFilters();
                 }
-                $location.path(path);
+                $location.search(path);
                 if (isDefaultSort) {
                     $scope.$apply();
                 }
             }
 
             function parseUrl() {
-                var url = $location.path().slice(1),
-                    params = {},
+                var params = $location.search(),
                     customParams = {};
 
-                $scope.params = params;
-
-                url.split('&').forEach(function (urlParam) {
-                        var param = urlParam.split('=');
-                        params[param[0]] = param[1];
-                        if (param[0] !== 'page' && param[0] !== 'sort' && param[0] !== 'itemsPerPage') {
-                            customParams[decodeURIComponent(param[0])] = decodeURIComponent(param[1]);
-                        }
+                Object.keys(params).forEach(function(key) {
+                    if (key !== 'page' && key !== 'sort' && key !== 'itemsPerPage') {
+                        customParams[key] = params[key];
                     }
-                );
+                });
 
                 //custom filters
                 $scope.filters.forEach(function (filter) {
@@ -216,7 +218,12 @@
             }
 
             function getData() {
-                var url = $location.path().slice(1);
+                var url = '';
+                var params = $location.search();
+                Object.keys(params).forEach(function(key) {
+                    url += key + '=' + params[key] + '&';
+                });
+                url = url.slice(0, -1);
                 if (!url && $scope.sortOptions.predicate) {
                     $scope.sort($scope.sortOptions.predicate, true);
                 } else {

From 5da6511ecb5431dfd0b08c350383aca5b1ee7c50 Mon Sep 17 00:00:00 2001
From: skozlov <sergey.kozlovich@landsend.com>
Date: Tue, 28 Mar 2017 15:04:13 +0300
Subject: [PATCH 11/39] UI Router - added another state

---
 demo/bootstrap/js/routerServerPaginationApp.js    | 12 ++++++++++++
 demo/bootstrap/ui-router.html                     | 11 ++++++++++-
 demo/bootstrap/views/anotherView.html             |  4 ++++
 .../bootstrap/views/router-server-pagination.html | 15 +++++----------
 4 files changed, 31 insertions(+), 11 deletions(-)
 create mode 100644 demo/bootstrap/views/anotherView.html

diff --git a/demo/bootstrap/js/routerServerPaginationApp.js b/demo/bootstrap/js/routerServerPaginationApp.js
index e8b28a8..49e7087 100644
--- a/demo/bootstrap/js/routerServerPaginationApp.js
+++ b/demo/bootstrap/js/routerServerPaginationApp.js
@@ -22,6 +22,11 @@
                 templateUrl: 'views/router-server-pagination.html',
                 controller: MyAppController
             })
+            .state('anotherView', {
+                url: '/anotherView',
+                templateUrl: 'views/anotherView.html',
+                controller: MyAppController
+            })
     }
 
     function MyAppController($scope, myAppFactory, $state) {
@@ -34,7 +39,14 @@
                 direction: 'asc'
             }
         };
+        $scope.UI = {};
         $scope.gridActions = {};
+        $scope.goToAnotherState = function() {
+            $state.go('anotherView');
+        };
+        $scope.back = function() {
+            $state.go('orders');
+        };
         myAppFactory.getStatuses().then(function (resp) {
             $scope.UI.statusOptions = resp.data;
         })
diff --git a/demo/bootstrap/ui-router.html b/demo/bootstrap/ui-router.html
index 139b239..20b37ed 100644
--- a/demo/bootstrap/ui-router.html
+++ b/demo/bootstrap/ui-router.html
@@ -36,7 +36,16 @@
         </ul>
     </div>
 </nav>
-<div ui-view></div>
+<div class="container">
+    <div class="margin-bottom-basic">
+        <h3>Angular Data Grid - UI Router Server Pagination.</h3>
+        <a href="https://github.com/angular-ui/ui-router">UI Router</a> plus all features for server pagination.<br/>
+        <a href="https://github.com/angular-ui/ui-router">UI Router</a> can be used in both modes (hash and html5).
+        <a href="https://github.com/angular-data-grid/angular-data-grid.github.io" target="_blank">Project GitHub</a>
+    </div>
+    <hr>
+    <div ui-view></div>
+</div>
 </body>
 
 <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script><!-- load jquery -->
diff --git a/demo/bootstrap/views/anotherView.html b/demo/bootstrap/views/anotherView.html
new file mode 100644
index 0000000..427c2e4
--- /dev/null
+++ b/demo/bootstrap/views/anotherView.html
@@ -0,0 +1,4 @@
+<h3>Another View</h3>
+<div class="form-group">
+    <button class="btn btn-primary" ng-click="back()">Back</button>
+</div>
\ No newline at end of file
diff --git a/demo/bootstrap/views/router-server-pagination.html b/demo/bootstrap/views/router-server-pagination.html
index d916b5f..1d112af 100644
--- a/demo/bootstrap/views/router-server-pagination.html
+++ b/demo/bootstrap/views/router-server-pagination.html
@@ -1,12 +1,7 @@
 <div class="container">
-    <div class="margin-bottom-basic">
-        <h3>Angular Data Grid - UI Router Server Pagination.</h3>
-        UI Router plus all features for server pagination<br/>
-        Features enabled: sorting, filtering (using both in-grid and external controls), pagination and items-per-page functionality.
-        Angular UI Datepicker used for date controls, although you can use any other framework, plugin or styling.
-        <a href="https://github.com/angular-data-grid/angular-data-grid.github.io" target="_blank">Project GitHub</a>
+    <div class="form-group">
+        <button class="btn btn-primary" ng-click="goToAnotherState()">Go to another state</button>
     </div>
-    <hr>
     <div class="row">
         <div>
             <div class="col-md-4">
@@ -117,8 +112,8 @@ <h3>Angular Data Grid - UI Router Server Pagination.</h3>
         <table class="table table-bordered">
             <thead>
             <tr>
-                <th width="30%" sortable="orderNo" class="sortable">Order #</th>
-                <th width="30%" sortable="datePlaced" class="sortable">Date Placed</th>
+                <th width="30%" sortable="orderNo" class="sortable">Order # </th>
+                <th width="30%" sortable="datePlaced" class="sortable">Date Placed </th>
                 <th class="st-sort-disable th-dropdown">
                     <select class="form-control width-15"
                             filter-by="status"
@@ -131,7 +126,7 @@ <h3>Angular Data Grid - UI Router Server Pagination.</h3>
                         </option>
                     </select>
                 </th>
-                <th sortable="total" class="sortable">Total</th>
+                <th sortable="total" class="sortable">Total </th>
             </tr>
             </thead>
             <tbody>

From 21e04e49794fdc06735fd9a44b35be1d4b3c24f5 Mon Sep 17 00:00:00 2001
From: AlexZ <alexanderzhuk@coherentsolutions.com>
Date: Tue, 28 Mar 2017 15:31:05 +0300
Subject: [PATCH 12/39] Update README.md

---
 README.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/README.md b/README.md
index 6d10e41..e0416b4 100644
--- a/README.md
+++ b/README.md
@@ -1,4 +1,5 @@
 ##Angular Data Grid
+
 Light, flexible and performant Data Grid for AngularJS apps, with built-in sorting, pagination and filtering options, unified API for client-side and server-side data fetching, 
 seamless synchronization with browser address bar and total freedom in mark-up and styling suitable for your application. Angular 1.3 - 1.6 compliant.
 

From a5eb370d0131ff34995ab201be31224085bf7397 Mon Sep 17 00:00:00 2001
From: AlexZ <alexanderzhuk@coherentsolutions.com>
Date: Tue, 28 Mar 2017 15:31:25 +0300
Subject: [PATCH 13/39] Update README.md

---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index e0416b4..48ba5dd 100644
--- a/README.md
+++ b/README.md
@@ -1,4 +1,4 @@
-##Angular Data Grid
+## Angular Data Grid
 
 Light, flexible and performant Data Grid for AngularJS apps, with built-in sorting, pagination and filtering options, unified API for client-side and server-side data fetching, 
 seamless synchronization with browser address bar and total freedom in mark-up and styling suitable for your application. Angular 1.3 - 1.6 compliant.

From d6e0508dd54ce84f43c6a6ef7dcbdb81c94a7a4a Mon Sep 17 00:00:00 2001
From: AlexZ <alexanderzhuk@coherentsolutions.com>
Date: Tue, 28 Mar 2017 15:37:16 +0300
Subject: [PATCH 14/39] Update README.md

---
 README.md | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/README.md b/README.md
index 48ba5dd..90c54c6 100644
--- a/README.md
+++ b/README.md
@@ -239,3 +239,6 @@ Then create in `gridOptions.customFilters` variable named as `ng-model` with fil
 All filters have optional parameter `disable-url`. If you set it to **true**, URL-synchronization for this filter will be disabled. 
 
 If you need to use 2 or more grids on page, please add `id` to grids, and then use `grid-id` attribute on filters to specify their corresponding grid. [Example](http://angular-data-grid.github.io/demo/bootstrap/multiple.html)
+
+### Next / Future
+ - Port data grid to Angular2?

From 3ad18336fe65f0464fd4640156f7ba7515b39dd1 Mon Sep 17 00:00:00 2001
From: Alexander Zhuk <AZhuk@lifetimefitness.com>
Date: Tue, 28 Mar 2017 16:07:41 +0300
Subject: [PATCH 15/39] updating package.json with new version

---
 package.json | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/package.json b/package.json
index 3e5963a..260e070 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "angular-data-grid",
-  "version": "0.1.0",
+  "version": "1.0.0",
   "scripts": {
     "start": "gulp serve",
     "prebuild": "npm install"
@@ -14,7 +14,7 @@
     "gulp-sass": "^2.1.0",
     "gulp-uglify": "^1.4.2"
   },
-  "description": "Light, flexible and performant Data Grid for AngularJS apps, with built-in sorting, pagination and filtering options, unified API for client-side and server-side data fetching, \r seamless synchronization with browser address bar and total freedom in mark-up and styling suitable for your application. Angular 1.3 - 1.5 compliant.",
+  "description": "Light, flexible and performant Data Grid for AngularJS apps, with built-in sorting, pagination and filtering options, unified API for client-side and server-side data fetching, \r seamless synchronization with browser address bar and total freedom in mark-up and styling suitable for your application. Angular 1.3 - 1.6 compliant.",
   "main": "index.html",
   "devDependencies": {},
   "repository": {
@@ -23,12 +23,15 @@
   },
   "keywords": [
     "angular data grid",
+    "angular-data-grid",
+    "angular grid",
+    "angular-grid",
     "data grid",
     "data grid for angular",
     "ng-data-grid",
     "ng-table",
     "angular table",
-    "bootstra data grid",
+    "bootstrap data grid",
     "material design grid",
     "data table"
   ],

From 60dda0ebc73ae391a4c43f3b5ef100c08fc24ce1 Mon Sep 17 00:00:00 2001
From: skozlov <sergey.kozlovich@landsend.com>
Date: Tue, 28 Mar 2017 17:04:55 +0300
Subject: [PATCH 16/39] Readme file was updated (urlSync)

---
 README.md | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/README.md b/README.md
index 90c54c6..55011cd 100644
--- a/README.md
+++ b/README.md
@@ -14,7 +14,7 @@ Demo Angular UI Router: http://angular-data-grid.github.io/demo/bootstrap/ui-rou
 ### Features
  - Does not have any hard-coded template so you can choose any mark-up you need, from basic `<table>` layout to any `<div>` structure.
  - Easily switch between the most popular Bootstrap and Google Material theming, or apply your own CSS theme just by changing several CSS classes.
- - Built-in sync with browser address bar (URL), so you can copy-n-paste sorting/filtering/pagination results URL and open it in other browser / send to anyone - even if pagination / filtering are done on a client-side. 
+ - Built-in sync with browser address bar (URL), so you can copy-n-paste sorting/filtering/pagination results URL and open it in other browser / send to anyone - even if pagination / filtering are done on a client-side. [See details](#url-synchronization)
  - Support of [Angular UI Router](https://github.com/angular-ui/ui-router) navigation. 
  - Unlike most part of other Angular DataGrids, we intentionally use non-isolated scope of the directive to maximize flexibility, so it can be easily synchronized with any data changes inside your controller. 
  NOTE! With great power comes great responsibility, so use non-isolated API wisely.
@@ -235,9 +235,12 @@ Then create in `gridOptions.customFilters` variable named as `ng-model` with fil
 
 ```
 
-### Others
-All filters have optional parameter `disable-url`. If you set it to **true**, URL-synchronization for this filter will be disabled. 
+### Url Synchronization
+You can disable/enable URL-synchronization for whole grid. Just set `gridOptions.urlSync` to **false**/**true**
+All filters have optional parameter `disable-url`. If you set it to **true**, URL-synchronization for this filter will be disabled.
+
 
+### Others
 If you need to use 2 or more grids on page, please add `id` to grids, and then use `grid-id` attribute on filters to specify their corresponding grid. [Example](http://angular-data-grid.github.io/demo/bootstrap/multiple.html)
 
 ### Next / Future

From 16f87e1acd126a526ccd635afb401548436d1e87 Mon Sep 17 00:00:00 2001
From: AlexZ <alexanderzhuk@coherentsolutions.com>
Date: Tue, 28 Mar 2017 17:26:53 +0300
Subject: [PATCH 17/39] Update README.md

---
 README.md | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

diff --git a/README.md b/README.md
index 55011cd..e10d9c3 100644
--- a/README.md
+++ b/README.md
@@ -235,13 +235,16 @@ Then create in `gridOptions.customFilters` variable named as `ng-model` with fil
 
 ```
 
-### Url Synchronization
-You can disable/enable URL-synchronization for whole grid. Just set `gridOptions.urlSync` to **false**/**true**
-All filters have optional parameter `disable-url`. If you set it to **true**, URL-synchronization for this filter will be disabled.
+### URL Synchronization
+You can disable/enable URL synchronization for the whole grid or on a level of particular filter. 
 
+Global parameter `gridOptions.urlSync` (boolean) works for the whole grid.
 
-### Others
+Each filter has optional parameter `disable-url` (boolean). If you set it to **true**, URL-synchronization for this particular filter will be disabled.
+
+
+### Multiple grids on page
 If you need to use 2 or more grids on page, please add `id` to grids, and then use `grid-id` attribute on filters to specify their corresponding grid. [Example](http://angular-data-grid.github.io/demo/bootstrap/multiple.html)
 
 ### Next / Future
- - Port data grid to Angular2?
+ - Port to Angular2?

From c39897d759abf3437b8b676d1e56236628884310 Mon Sep 17 00:00:00 2001
From: AlexZ <alexanderzhuk@coherentsolutions.com>
Date: Tue, 28 Mar 2017 17:28:23 +0300
Subject: [PATCH 18/39] Update README.md

---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index e10d9c3..094fab6 100644
--- a/README.md
+++ b/README.md
@@ -240,7 +240,7 @@ You can disable/enable URL synchronization for the whole grid or on a level of p
 
 Global parameter `gridOptions.urlSync` (boolean) works for the whole grid.
 
-Each filter has optional parameter `disable-url` (boolean). If you set it to **true**, URL-synchronization for this particular filter will be disabled.
+Each filter has optional parameter `disable-url` (boolean, default is 'false'). If you set it to **true**, URL-synchronization for this particular filter will be disabled.
 
 
 ### Multiple grids on page

From 219d41d792e16def3a6fdda3d64491ddc88f31e2 Mon Sep 17 00:00:00 2001
From: AlexZ <alexanderzhuk@coherentsolutions.com>
Date: Tue, 28 Mar 2017 17:28:45 +0300
Subject: [PATCH 19/39] Update README.md

---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 094fab6..a453e66 100644
--- a/README.md
+++ b/README.md
@@ -238,7 +238,7 @@ Then create in `gridOptions.customFilters` variable named as `ng-model` with fil
 ### URL Synchronization
 You can disable/enable URL synchronization for the whole grid or on a level of particular filter. 
 
-Global parameter `gridOptions.urlSync` (boolean) works for the whole grid.
+Global parameter `gridOptions.urlSync` (boolean, default is 'false') works for the whole grid.
 
 Each filter has optional parameter `disable-url` (boolean, default is 'false'). If you set it to **true**, URL-synchronization for this particular filter will be disabled.
 

From 1842d577b3d94b888498a1e6fdd54a4a723bd962 Mon Sep 17 00:00:00 2001
From: AndreyChayko <chaiko.work@gmail.com>
Date: Mon, 10 Apr 2017 12:33:25 +0300
Subject: [PATCH 20/39] Support fixed header columns (#33)

* Fix Issue #29: Added initial structure

* Fix #29: Added samples for bootstrap and material-design themes. Added dataGridUtils module and fixed-header directive

* Fix #29: Code refactoring

* Fix Issue #29: Modifications to css for fixed-header

* Fix Issue #29: Removed unused code

* Fix Issue #29: Changed file structure

* Fix Issue #29: Added documentation for fixed header to bootstrap sample

* Fix Issue #29: Added documentation to material sample

* Fix Issue #29: Fixed description of the issue with md-content

* Fix Issue #29: Applied changes to documentation.
---
 demo/fixed-header/angular-md-grid.html        | 270 +++++++++++++++
 demo/fixed-header/bootstrap-grid.html         | 307 ++++++++++++++++++
 .../css/fixed-header.bootstrap.css            |  16 +
 .../css/fixed-header.material.css             |   8 +
 demo/fixed-header/js/bootstrap/demoApp.js     |  24 ++
 .../js/material-design/demoApp.js             |  23 ++
 .../scss/fixed-header.bootstrap.scss          |  25 ++
 .../scss/fixed-header.material.scss           |  14 +
 dist/css/fixedHeader/fixed-header.css         |  10 +
 dist/dataGrid.js                              |   3 +-
 dist/dataGrid.min.js                          |   2 +-
 dist/dataGridUtils.js                         |  89 +++++
 dist/dataGridUtils.min.js                     |   1 +
 dist/loading-bar.min.js                       |   2 +-
 dist/pagination.min.js                        |   2 +-
 gulpfile.js                                   |  20 +-
 src/js/dataGrid.js                            |   3 +-
 src/js/directives/dataGridUtils.js            |   4 +
 .../directives/fixedHeader/fixed-header.scss  |  15 +
 src/js/directives/fixedHeader/fixedHeader.js  |  85 +++++
 20 files changed, 917 insertions(+), 6 deletions(-)
 create mode 100644 demo/fixed-header/angular-md-grid.html
 create mode 100644 demo/fixed-header/bootstrap-grid.html
 create mode 100644 demo/fixed-header/css/fixed-header.bootstrap.css
 create mode 100644 demo/fixed-header/css/fixed-header.material.css
 create mode 100644 demo/fixed-header/js/bootstrap/demoApp.js
 create mode 100644 demo/fixed-header/js/material-design/demoApp.js
 create mode 100644 demo/fixed-header/scss/fixed-header.bootstrap.scss
 create mode 100644 demo/fixed-header/scss/fixed-header.material.scss
 create mode 100644 dist/css/fixedHeader/fixed-header.css
 create mode 100644 dist/dataGridUtils.js
 create mode 100644 dist/dataGridUtils.min.js
 create mode 100644 src/js/directives/dataGridUtils.js
 create mode 100644 src/js/directives/fixedHeader/fixed-header.scss
 create mode 100644 src/js/directives/fixedHeader/fixedHeader.js

diff --git a/demo/fixed-header/angular-md-grid.html b/demo/fixed-header/angular-md-grid.html
new file mode 100644
index 0000000..134befc
--- /dev/null
+++ b/demo/fixed-header/angular-md-grid.html
@@ -0,0 +1,270 @@
+<!DOCTYPE html>
+<html>
+<head lang="en">
+    <meta charset="UTF-8">
+    <title>Angular Data Grid - Material Design</title>
+    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic">
+    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
+    <link rel="stylesheet" href="https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-blue.min.css">
+    <link rel="stylesheet" href="../../demo/material/css/angular-data-grid.material.css">
+    <link rel="stylesheet" href="../../dist/css/fixedHeader/fixed-header.css">
+    <link rel="stylesheet" href="css/fixed-header.material.css">
+</head>
+<body ng-app="myApp" ng-controller="myAppController" ng-cloak>
+<div layout="column" layout-fill>
+    <md-toolbar layout="row" layout-align="center">
+        <div class="md-toolbar-tools" flex-gt-md="60" flex-md="80" flex-sm="100">
+            <span>Angular Data Grid &mdash; Material Design</span>
+            <span flex></span>
+            <md-menu md-position-mode="target-right target">
+                <md-button ng-click="$mdOpenMenu($event)">
+                    <span layout="row" layout-align="center center">
+                    Change theme
+                    <i class="material-icons">arrow_drop_down</i>
+                    </span>
+                </md-button>
+                <md-menu-content>
+                    <md-menu-item>
+                        <a href="../bootstrap/">Bootstrap Design</a>
+                    </md-menu-item>
+                    <md-menu-item>
+                        <a href="index.html"><strong>Material Design</strong></a>
+                    </md-menu-item>
+                </md-menu-content>
+            </md-menu>
+        </div>
+    </md-toolbar>
+
+    <div flex-gt-md="60" flex-md="80" flex-xs="100">
+        <div>
+            <h4>Angular Data Grid sample using Material Design styling</h4>
+
+            <p>Features enabled: sorting, filtering, sync with browser URLs, pagination and item-per-page functionality.
+                Out-of-box <a href="https://material.angularjs.org/" target="_blank">Angular Material</a> layout and
+                input controls used,
+                along with <a href="http://www.getmdl.io/" target="_blank">Material Design Light</a> default CSS for
+                grid styling.
+                <a href="https://github.com/angular-data-grid/angular-data-grid.github.io"
+                   target="_blank">Project GitHub</a></p>
+
+            <hr>
+            <h3>How To Freeze Table Header</h3>
+            <h4>Using HTML Layout</h4>
+            <div>
+                <p>The first option is to split table header and table body in two tables.
+                    One way to do this is to follow the next steps:</p>
+                <ul>
+                    <li>Use the next styles (with any fixed height) applied to table body container to make it scrollable: <br>
+                        <code>.div-table-body { height: 600px; overflow-x: auto; overflow-y: scroll; } </code> <br>
+                    </li>
+                    <li>Make sure that <code>th</code> elements have the same padding as <code>td</code> elements have.</li>
+                    <li>Use <code>padding-right</code> with the value of scroll bar width to make an offset for the table contains header.</li>
+                    <li>Use <code>width</code> attribute for columns to sync widths.</li>
+                </ul>
+                <p>Code Sample:
+                <pre>
+&lt;table&gt;
+    &lt;thead&gt;
+        ...
+    &lt;/thead&gt;
+&lt;/table&gt;
+&lt;table&gt;
+    &lt;tbody class="div-table-body"&gt;
+        ...
+    &lt;/tbody&gt;
+&lt;/table&gt;
+        </pre>
+                </p>
+            </div>
+            <h4>Using Stand-alone Directive</h4>
+            <div>
+                <p>Another option is to use the directive <code>fixed-header</code> that can be injected to the Data Grid like a separate module <code>dataGridUtils</code>.</p>
+                <p>To make it work it is needed to perform next steps:</p>
+                <ul>
+                    <li>Include script to your application: <br>
+                        <code>&lt;script src="bower_components/angular-data-grid/dist/dataGridUtils.min.js"&gt;&lt;/script&gt;</code>
+                    </li>
+                    <li>Include css stylesheets to your application: <br>
+                        <code>&lt;link rel="stylesheet" href="bower_components/angular-data-grid/css/fixedHeader/fixed-header.css"&gt;</code>
+                    </li>
+                    <li>Inject dataGridUtils dependency in your module: <br>
+                        <code>angular.module('myApp', ['dataGrid', ‘dataGridUtils.fixedHeader’])</code>
+                    </li>
+                    <li>Apply the directive <code>fixed-header</code> to the grid table: <br>
+                        <code>&lt;table class="table" fixed-header&gt;</code>
+                    </li>
+                </ul>
+                <p>The directive uses <code>z-index: 99</code> if your page uses the same value or higher please make appropriate changes to <b>fixed-header.scss</b> file. </p>
+                <p>The directive also has additional attribute <code>offset-from-element</code>.
+                    It is needed if you already have some other elements with fixed position above the table.
+                    In this case you need to pass a class or id of the very last element (if there are several) to this attribute
+                    to make the directive take
+                    into consideration that header needs to be fixed with offset from above elements.</p>
+                <p>Example: <br>
+                    <code>&lt;table class="table" fixed-header offset-from-element
+                        =”.the-class-on-above-fixed-element”&gt;</code> <br>
+                    or <br>
+                    <code>&lt;table class="table" fixed-header offset-from-element
+                        =”=”#the-id-on-above-fixed-element”&gt;</code>
+                </p>
+                <br>
+                <p>The directive subscribes on scroll event, but the event is not fired when directive is used inside <code>&lt;md-content&gt;</code>, so to make it work please use the directive outside the <code>&lt;md-content&gt;</code> container.
+                    For more information about this problem please review this <a href="https://github.com/angular/material/issues/6657">issue</a>.
+                </p>
+            </div>
+            <hr>
+        </div>
+        <hr>
+        <div layout-gt-xs="row" layout-xs="column" layout-align="stretch center">
+            <div layout="row" layout-align="center start">
+                <md-input-container md-no-float md-is-error="false" class="md-block flex-gt-xs flex-xs">
+                    <input ng-model="code"
+                           class="md-input"
+                           ng-change="gridActions.filter()"
+                           id="order"
+                           placeholder="Search by Order #"
+                           filter-by="code"
+                           filter-type="text"
+                           aria-invalid="false">
+                </md-input-container>
+            </div>
+            <div layout="row" layout-align="start center">
+                <md-datepicker ng-model="dateFrom"
+                               flex="100"
+                               md-placeholder="From Date"
+                               is-open="dateFromOpened"
+                               ng-click="dateFromOpened = true"
+                               filter-by="placed"
+                               filter-type="dateFrom"
+                               ng-change="gridActions.filter()"></md-datepicker>
+            </div>
+            <div layout="row" layout-align="start center">
+                <md-datepicker ng-model="dateTo"
+                               flex="100"
+                               md-placeholder="To Date"
+                               is-open="dateToOpened"
+                               ng-click="dateToOpened = true"
+                               filter-by="placed"
+                               filter-type="dateTo"
+                               ng-change="gridActions.filter()"></md-datepicker>
+            </div>
+            <div layout="row" layout-align="start center">
+                <md-button ng-show="dateTo || dateFrom" class="md-raised md-primary"
+                           ng-click="dateTo = ''; dateFrom = ''; gridActions.refresh();">Clear Dates
+                </md-button>
+            </div>
+        </div>
+        <div grid-data id='test' grid-options="gridOptions" grid-actions="gridActions">
+            <div layout-gt-sm="row" layout-sm="column" layout-align="center">
+                <div flex-gt-sm="25" flex-sm="100" layout="row" layout-align="start center">
+                    <span>{{filtered.length}} items total</span>
+                </div>
+                <div flex-gt-sm="75" flex-xs="100">
+                    <div layout-xs="column" layout="row" layout-align-xs="end end" layout-align="end center">
+                        <grid-pagination max-size="5"
+                                         boundary-links="true"
+                                         class="pagination mdl-shadow--2dp"
+                                         ng-if="paginationOptions.totalItems  > paginationOptions.itemsPerPage"
+                                         total-items="paginationOptions.totalItems"
+                                         ng-model="paginationOptions.currentPage"
+                                         ng-change="reloadGrid()"
+                                         items-per-page="paginationOptions.itemsPerPage"></grid-pagination>
+                        <md-input-container flex-offset-gt-xs="5" class="items-per-page">
+                            <md-select ng-init="paginationOptions.itemsPerPage = '10'"
+                                       ng-model="paginationOptions.itemsPerPage" ng-change="reloadGrid()">
+                                <md-option>10</md-option>
+                                <md-option>25</md-option>
+                                <md-option>50</md-option>
+                                <md-option>75</md-option>
+                            </md-select>
+                        </md-input-container>
+                    </div>
+                </div>
+            </div>
+            <div>
+                <table class="mdl-data-table mdl-js-data-table mdl-data-table--selectable mdl-shadow--2dp" fixed-header>
+                    <thead>
+                    <tr>
+                        <th sortable="code" class="sortable mdl-data-table__cell--non-numeric">
+                            <span>Order #</span>
+                        </th>
+                        <th class="st-sort-disable th-dropdown">
+                            <md-select filter-by="statusDisplay"
+                                       filter-type="select"
+                                       ng-model="status"
+                                       placeholder="Status"
+                                       ng-change="filter()">
+                                <md-option value="">All Statuses</md-option>
+                                <md-option ng-repeat="option in statusOptions track by option.value"
+                                           value="{{option.value}}">
+                                    {{option.text}}
+                                </md-option>
+                            </md-select>
+                        </th>
+                        <th sortable="placed" class="sortable">
+                            <span>Date Placed</span>
+                        </th>
+                        <th sortable='total.value' class="sortable">
+                            <span>Total</span>
+                        </th>
+                    </tr>
+                    </thead>
+                    <tbody>
+                    <tr grid-item>
+                        <td class="mdl-data-table__cell--non-numeric">
+                            <span ng-bind="item.code"></span>
+                        </td>
+                        <td ng-bind="item.statusDisplay"></td>
+                        <td ng-bind="item.placed | date:'MM/dd/yyyy'"></td>
+                        <td ng-bind="item.total.formattedValue"></td>
+                    </tr>
+                    </tbody>
+                </table>
+            </div>
+            <div layout-xs="column" layout="row" layout-align-xs="end end" layout-align="end center">
+                <grid-pagination max-size="5"
+                                 boundary-links="true"
+                                 class="pagination"
+                                 ng-if="paginationOptions.totalItems  > paginationOptions.itemsPerPage"
+                                 total-items="paginationOptions.totalItems"
+                                 ng-model="paginationOptions.currentPage"
+                                 ng-change="reloadGrid()"
+                                 items-per-page="paginationOptions.itemsPerPage"></grid-pagination>
+                <md-input-container flex-offset-gt-xs="5" class="items-per-page">
+                    <md-select ng-init="paginationOptions.itemsPerPage = '10'" ng-model="paginationOptions.itemsPerPage"
+                               ng-change="reloadGrid()">
+                        <md-option>10</md-option>
+                        <md-option>25</md-option>
+                        <md-option>50</md-option>
+                        <md-option>75</md-option>
+                    </md-select>
+                </md-input-container>
+            </div>
+        </div>
+        <hr>
+        <md-button class="md-raised md-primary" ng-click="showCode = !showCode">CodePen</md-button>
+        <div ng-show="showCode" class="codepen-wrap">
+            <p data-height="768" data-theme-id="21603" data-slug-hash="eJWWpM" data-default-tab="html"
+               data-user="AngularDataGrid" class='codepen'>See the Pen <a
+                    href='http://codepen.io/AngularDataGrid/pen/eJWWpM'>eJWWpM</a> by AngularDataGrid (<a
+                    href='http://codepen.io/AngularDataGrid'>@AngularDataGrid</a>) on <a href='http://codepen.io'>CodePen</a>.
+            </p>
+            <script async src="//assets.codepen.io/assets/embed/ei.js"></script>
+        </div>
+        <hr>
+    </div>
+</div>
+</body>
+
+<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
+<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-animate.min.js"></script>
+<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-aria.min.js"></script>
+<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-messages.min.js"></script>
+<script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
+<script src="../../dist/pagination.min.js"></script>
+<script src="../../dist/dataGrid.min.js"></script>
+<script src="../../dist/dataGridUtils.min.js"></script>
+<script src="js/material-design/demoApp.js"></script>
+
+</html>
\ No newline at end of file
diff --git a/demo/fixed-header/bootstrap-grid.html b/demo/fixed-header/bootstrap-grid.html
new file mode 100644
index 0000000..bf2d003
--- /dev/null
+++ b/demo/fixed-header/bootstrap-grid.html
@@ -0,0 +1,307 @@
+<!DOCTYPE html>
+<html>
+<head lang="en">
+    <meta charset="UTF-8">
+    <title>Angular Data Grid - Bootstrap Design</title>
+    <link rel="icon" href="https://angularjs.org/favicon.ico" type="image/x-icon">
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
+    <link rel="stylesheet" href="../../demo/bootstrap/css/angular-data-grid.bootstrap.css">
+    <link rel="stylesheet" href="../../dist/css/fixedHeader/fixed-header.css">
+    <link rel="stylesheet" href="css/fixed-header.bootstrap.css">
+</head>
+<body ng-app="myApp" ng-controller="myAppController" ng-cloak>
+<nav class="navbar navbar-inverse fixed-nav">
+    <div class="container">
+        <a href="#" class="navbar-brand">Angular Data Grid - Bootstrap Design</a>
+        <div class="navbar-form navbar-right" uib-dropdown>
+            <button id="single-button" type="button" class="btn btn-info" uib-dropdown-toggle>
+                Change Theme <span class="caret"></span>
+            </button>
+            <ul class="dropdown-menu" aria-labelledby="simple-dropdown">
+                <li>
+                    <a href="index.html"><strong>Bootstrap Design</strong></a>
+                </li>
+                <li>
+                    <a href="../material/">Material Design</a>
+                </li>
+            </ul>
+        </div>
+    </div>
+</nav>
+<div class="container">
+    <div class="margin-bottom-basic padding-top-50">
+        <h2>Angular Data Grid sample using out-of-box Bootstrap styling</h2>
+        Features enabled: sorting, filtering (using both in-grid and external controls), sync with browser URLs, pagination and items-per-page functionality.
+        Angular UI Datepicker used for date controls, although you can use any other framework, plugin or styling.
+        <a href="https://github.com/angular-data-grid/angular-data-grid.github.io" target="_blank">Project GitHub</a>
+    </div>
+    <hr>
+    <h3>How To Freeze Table Header</h3>
+    <h4>Using HTML Layout</h4>
+    <div>
+        <p>The first option is to split table header and table body in two tables.
+            One way to do this is to follow the next steps:</p>
+        <ul>
+            <li>Use the next styles (with any fixed height) applied to table body container to make it scrollable: <br>
+                <code>.div-table-body { height: 600px; overflow-x: auto; overflow-y: scroll; } </code>
+            </li>
+            <li>Make sure that <code>th</code> elements have the same padding as <code>td</code> elements have.</li>
+            <li>Use <code>padding-right</code> with the value of scroll bar width to make an offset for the table contains header.</li>
+            <li>Use <code>width</code> attribute for columns to sync widths.</li>
+        </ul>
+        <p>Code Sample:
+        <pre>
+&lt;table&gt;
+    &lt;thead&gt;
+        ...
+    &lt;/thead&gt;
+&lt;/table&gt;
+&lt;table&gt;
+    &lt;tbody class="div-table-body"&gt;
+        ...
+    &lt;/tbody&gt;
+&lt;/table&gt;
+        </pre>
+        </p>
+    </div>
+    <h4>Using Stand-alone Directive</h4>
+    <div>
+        <p>Another option is to use the directive <code>fixed-header</code> that can be injected to the Data Grid like a separate module <code>dataGridUtils</code>.</p>
+        <p>To make it work it is needed to perform next steps:</p>
+        <ul>
+            <li>Include script to your application: <br>
+                <code>&lt;script src="bower_components/angular-data-grid/dist/dataGridUtils.min.js"&gt;&lt;/script&gt;</code>
+            </li>
+            <li>Include css stylesheets to your application: <br>
+                <code>&lt;link rel="stylesheet" href="bower_components/angular-data-grid/css/fixedHeader/fixed-header.css"&gt;</code>
+            </li>
+            <li>Inject dataGridUtils dependency in your module: <br>
+                <code>angular.module('myApp', ['dataGrid', ‘dataGridUtils.fixedHeader’])</code>
+            </li>
+            <li>Apply the directive <code>fixed-header</code> to the grid table: <br>
+                <code>&lt;table class="table" fixed-header&gt;</code>
+            </li>
+        </ul>
+        <p>The directive uses <code>z-index: 99</code> if your page uses the same value or higher please make appropriate changes to <b>fixed-header.scss</b> file. </p>
+        <p>The directive also has additional attribute <code>offset-from-element</code>.
+           It is needed if you already have some other elements with fixed position above the table.
+           In this case you need to pass a class or id of the very last element (if there are several) to this attribute
+           to make the directive take
+           into consideration that header needs to be fixed with offset from above elements.</p>
+        <p>Example: <br>
+            <code>&lt;table class="table" fixed-header offset-from-element
+                =”.the-class-on-above-fixed-element”&gt;</code> <br>
+            or <br>
+            <code>&lt;table class="table" fixed-header offset-from-element
+                =”=”#the-id-on-above-fixed-element”&gt;</code>
+        </p>
+    </div>
+    <hr>
+    <h4>Additional Demos</h4>
+    <ul>
+        <li>
+            <a href="../100k/" class="margin-bottom-basic" target="_blank">100k rows</a>
+        </li>
+        <li>
+            <a href="multiple.html" target="_blank">Multiple grids on page</a>
+        </li>
+        <li>
+            <a href="server-pagination.html" target="_blank">Server pagination</a>
+        </li>
+        <li>
+            <a href="ui-router.html" target="_blank">UI Router plus server pagination</a>
+        </li>
+    </ul>
+    <hr>
+    <div class="row">
+        <div>
+            <div class="col-md-4">
+                <div class="form-group">
+                    <label for="orderIdFilter">Search by Order #</label>
+                    <input id="orderIdFilter" type="text" class="form-control order-search-box"
+                           placeholder="Enter Order #"
+                           ng-change="gridActions.filter()"
+                           ng-model="code"
+                           filter-by="code"
+                           filter-type="text">
+                </div>
+            </div>
+            <div class="col-md-4">
+                <div class="form-group">
+                    <label for="dateFromFilter">Date From</label>
+
+                    <div class="input-group">
+                        <input type="text"
+                               id="dateFromFilter"
+                               class="form-control"
+                               uib-datepicker-popup="dd/MM/yyyy"
+                               placeholder="DD/MM/YYYY"
+                               max-date="dateTo"
+                               close-text="Close"
+                               ng-model="dateFrom"
+                               show-weeks="true"
+                               is-open="dateFromOpened"
+                               ng-click="dateFromOpened = true"
+                               filter-by="placed"
+                               filter-type="dateFrom"
+                               ng-blur="gridActions.filter()"
+                               ng-focus="gridActions.filter()"
+                               show-weeks="false"
+                               close-text="Close"/>
+                        <span class="input-group-btn">
+                            <label for="dateFromFilter" class="btn btn-default">
+                                <i class="fa fa-calendar"></i></label>
+                          </span>
+                    </div>
+                </div>
+            </div>
+            <div class="col-md-4">
+                <div class="form-group">
+                    <label for="dateToInput">Date To</label>
+
+                    <div class="input-group">
+                        <input type="text"
+                               id="dateToInput"
+                               class="form-control"
+                               uib-datepicker-popup="dd/MM/yyyy"
+                               placeholder="DD/MM/YYYY"
+                               min-date="dateFrom"
+                               max-date="dateTo"
+                               close-text="Close"
+                               ng-model="dateTo"
+                               show-weeks="true"
+                               is-open="dateToOpened"
+                               ng-click="dateToOpened = true"
+                               filter-by="placed"
+                               filter-type="dateTo"
+                               ng-blur="gridActions.filter()"
+                               ng-focus="gridActions.filter()"
+                               show-weeks="false"
+                               close-text="Close">
+                        <span class="input-group-btn">
+                            <label for="dateToInput" class="btn btn-default">
+                                <i class="fa fa-calendar"></i></label>
+                          </span>
+                    </div>
+                </div>
+                <div ng-show="dateTo || dateFrom" class="buttons-right">
+                    <a href="" ng-click="dateTo = ''; dateFrom = ''; gridActions.refresh();">Clear Dates</a>
+                </div>
+            </div>
+        </div>
+    </div>
+    <hr>
+    <div class="row">
+        <div class="col-md-12">
+            <div grid-data id='test' grid-options="gridOptions" grid-actions="gridActions">
+                <div class="row">
+                    <div class="col-md-3">
+                        <span class="items">{{filtered.length}} items total</span>
+                    </div>
+                    <div class="col-md-9 text-right">
+                        <form class="form-inline pull-right margin-bottom-basic">
+                            <div class="form-group">
+                                <grid-pagination max-size="5"
+                                                 boundary-links="true"
+                                                 class="pagination-sm"
+                                                 total-items="paginationOptions.totalItems"
+                                                 ng-model="paginationOptions.currentPage"
+                                                 ng-change="reloadGrid()"
+                                                 items-per-page="paginationOptions.itemsPerPage"></grid-pagination>
+                            </div>
+                            <div class="form-group items-per-page">
+                                <label for="itemsOnPageSelect1">Items per page:</label>
+                                <select id="itemsOnPageSelect1" class="form-control input-sm" ng-init="paginationOptions.itemsPerPage = '10'" ng-model="paginationOptions.itemsPerPage" ng-change="reloadGrid()">
+                                    <option>10</option>
+                                    <option>25</option>
+                                    <option>50</option>
+                                    <option>75</option>
+                                </select>
+                            </div>
+                        </form>
+                    </div>
+                </div>
+                <table class="table table-bordered table-striped" fixed-header offset-from-element=".fixed-nav">
+                    <thead>
+                    <tr>
+                        <th sortable="code" class="sortable">
+                            Order #
+                        </th>
+                        <th sortable="placed" class="sortable">
+                            Date Placed
+                        </th>
+                        <th class="st-sort-disable th-dropdown">
+                            <select class="form-control width-15"
+                                    filter-by="statusDisplay"
+                                    filter-type="select"
+                                    ng-model="status"
+                                    ng-change="filter()">
+                                <option value="">All Statuses</option>
+                                <option ng-repeat="option in statusOptions track by option.value"
+                                        value="{{option.value}}">{{option.text}}
+                                </option>
+                            </select>
+                        </th>
+                        <th sortable='total.value' class="sortable">
+                            Total
+                        </th>
+                    </tr>
+                    </thead>
+                    <tbody>
+                    <tr grid-item>
+                        <td width="30%" ng-bind="item.code"></td>
+                        <td width="30%" ng-bind="item.placed | date:'MM/dd/yyyy'"></td>
+                        <td ng-bind="item.statusDisplay"></td>
+                        <td ng-bind="item.total.formattedValue"></td>
+                    </tr>
+                    </tbody>
+                </table>
+                <form class="form-inline pull-right margin-bottom-basic">
+                    <div class="form-group">
+                        <grid-pagination max-size="5"
+                                         boundary-links="true"
+                                         class="pagination-sm"
+                                         total-items="paginationOptions.totalItems"
+                                         ng-model="paginationOptions.currentPage"
+                                         ng-change="reloadGrid()"
+                                         items-per-page="paginationOptions.itemsPerPage"></grid-pagination>
+                    </div>
+                    <div class="form-group items-per-page">
+                        <label for="itemsOnPageSelect2">Items per page:</label>
+                        <select id="itemsOnPageSelect2" class="form-control input-sm" ng-init="paginationOptions.itemsPerPage = '10'"
+                                ng-model="paginationOptions.itemsPerPage" ng-change="reloadGrid()">
+                            <option>10</option>
+                            <option>25</option>
+                            <option>50</option>
+                            <option>75</option>
+                        </select>
+                    </div>
+                </form>
+            </div>
+        </div>
+    </div>
+    <hr>
+    <div>
+        <button class="btn btn-info margin-bottom-basic" ng-click="showCode = !showCode">CodePen</button>
+        <div ng-show="showCode">
+            <p data-height="768" data-theme-id="21603" data-slug-hash="xZddZm" data-default-tab="html" data-user="AngularDataGrid" class='codepen'>See the Pen <a
+                    href='http://codepen.io/AngularDataGrid/pen/xZddZm/'>xZddZm</a> by AngularDataGrid (<a href='http://codepen.io/AngularDataGrid'>@AngularDataGrid</a>) on <a href='http://codepen.io'>CodePen</a>.</p>
+            <script async src="//assets.codepen.io/assets/embed/ei.js"></script>
+        </div>
+    </div>
+    <hr>
+</div>
+</body>
+<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
+<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
+<script src="https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.js"></script>
+<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-animate.min.js"></script>
+<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-aria.min.js"></script>
+<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-messages.min.js"></script>
+<script src="../../dist/pagination.min.js"></script>
+<script src="../../dist/dataGrid.min.js"></script>
+<script src="../../dist/dataGridUtils.min.js"></script>
+<script src="js/bootstrap/demoApp.js"></script>
+
+</html>
\ No newline at end of file
diff --git a/demo/fixed-header/css/fixed-header.bootstrap.css b/demo/fixed-header/css/fixed-header.bootstrap.css
new file mode 100644
index 0000000..421dc34
--- /dev/null
+++ b/demo/fixed-header/css/fixed-header.bootstrap.css
@@ -0,0 +1,16 @@
+.fixed-header {
+  border: none; }
+  .fixed-header tr {
+    background-color: #fff; }
+
+.tbody-offset:before {
+  color: white;
+  height: 60px; }
+
+.fixed-nav {
+  position: fixed;
+  width: 100%;
+  z-index: 5; }
+
+.padding-top-50 {
+  padding-top: 50px; }
diff --git a/demo/fixed-header/css/fixed-header.material.css b/demo/fixed-header/css/fixed-header.material.css
new file mode 100644
index 0000000..d1ce846
--- /dev/null
+++ b/demo/fixed-header/css/fixed-header.material.css
@@ -0,0 +1,8 @@
+.fixed-header {
+  border: 1px solid rgba(0, 0, 0, 0.12); }
+  .fixed-header tr {
+    background-color: #fff; }
+
+.tbody-offset:before {
+  color: white;
+  height: 60px; }
diff --git a/demo/fixed-header/js/bootstrap/demoApp.js b/demo/fixed-header/js/bootstrap/demoApp.js
new file mode 100644
index 0000000..042d439
--- /dev/null
+++ b/demo/fixed-header/js/bootstrap/demoApp.js
@@ -0,0 +1,24 @@
+angular.module('myApp', ['ui.bootstrap', 'dataGrid', 'pagination', 'dataGridUtils.fixedHeader'])
+    .controller('myAppController', ['$scope', 'myAppFactory', function ($scope, myAppFactory) {
+
+        $scope.gridOptions = {
+            data: [],
+            urlSync: true
+        };
+
+        myAppFactory.getData().then(function (responseData) {
+            $scope.gridOptions.data = responseData.data;
+        });
+
+    }])
+    .factory('myAppFactory', function ($http) {
+        return {
+            getData: function () {
+                return $http({
+                    method: 'GET',
+                    url: 'https://angular-data-grid.github.io/demo/data.json'
+                });
+            }
+        }
+    });
+
diff --git a/demo/fixed-header/js/material-design/demoApp.js b/demo/fixed-header/js/material-design/demoApp.js
new file mode 100644
index 0000000..2f108af
--- /dev/null
+++ b/demo/fixed-header/js/material-design/demoApp.js
@@ -0,0 +1,23 @@
+angular.module('myApp', ['dataGrid', 'pagination', 'ngMaterial', 'dataGridUtils.fixedHeader'])
+    .controller('myAppController', ['$scope', 'myAppFactory', function ($scope, myAppFactory) {
+
+        $scope.gridOptions = {
+            data: [],
+            urlSync: true
+        };
+        myAppFactory.getData().then(function (responseData) {
+            $scope.gridOptions.data = responseData.data;
+        });
+
+    }])
+    .factory('myAppFactory', function ($http) {
+        return {
+            getData: function () {
+                return $http({
+                    method: 'GET',
+                    url: 'https://angular-data-grid.github.io/demo/data.json'
+                });
+            }
+        }
+    });
+
diff --git a/demo/fixed-header/scss/fixed-header.bootstrap.scss b/demo/fixed-header/scss/fixed-header.bootstrap.scss
new file mode 100644
index 0000000..8c6ff62
--- /dev/null
+++ b/demo/fixed-header/scss/fixed-header.bootstrap.scss
@@ -0,0 +1,25 @@
+//styles specific to bootstrap sample (not required)
+.fixed-header {
+  border: none;
+  tr {
+    background-color: #fff;
+  }
+}
+
+.tbody-offset {
+  &:before {
+    color: white;
+    height: 60px;
+  }
+}
+
+.fixed-nav {
+  position: fixed;
+  width: 100%;
+  z-index: 5;
+}
+
+.padding-top-50 {
+  padding-top: 50px;
+}
+
diff --git a/demo/fixed-header/scss/fixed-header.material.scss b/demo/fixed-header/scss/fixed-header.material.scss
new file mode 100644
index 0000000..b1dfee6
--- /dev/null
+++ b/demo/fixed-header/scss/fixed-header.material.scss
@@ -0,0 +1,14 @@
+//styles specific to material design sample (not required)
+.fixed-header {
+  border: 1px solid rgba(0,0,0,.12);
+  tr {
+    background-color: #fff;
+  }
+}
+
+.tbody-offset {
+  &:before {
+    color: white;
+    height: 60px;
+  }
+}
\ No newline at end of file
diff --git a/dist/css/fixedHeader/fixed-header.css b/dist/css/fixedHeader/fixed-header.css
new file mode 100644
index 0000000..29c52fc
--- /dev/null
+++ b/dist/css/fixedHeader/fixed-header.css
@@ -0,0 +1,10 @@
+.fixed-header {
+  top: 0;
+  position: fixed;
+  width: auto;
+  display: table;
+  z-index: 99; }
+
+.tbody-offset:before {
+  content: " ";
+  display: block; }
diff --git a/dist/dataGrid.js b/dist/dataGrid.js
index 1ae356c..7ed9847 100644
--- a/dist/dataGrid.js
+++ b/dist/dataGrid.js
@@ -12,7 +12,7 @@
                 return [];
             }
         })
-        .controller('gridController', ['$scope', '$element', '$filter', '$location', 'filtersFactory', function ($scope, $element, $filter, $location, filtersFactory) {
+        .controller('gridController', ['$scope', '$rootScope', '$element', '$filter', '$location', 'filtersFactory', function ($scope, $rootScope, $element, $filter, $location, filtersFactory) {
             // values by default
             $scope._gridOptions = $scope.$eval($element.attr('grid-options'));
             $scope._gridActions = $scope.$eval($element.attr('grid-actions'));
@@ -84,6 +84,7 @@
                 } else {
                     applyFilters();
                 }
+                $rootScope.$broadcast('gridReloaded');
             };
 
             $scope._gridActions.refresh = $scope.reloadGrid;
diff --git a/dist/dataGrid.min.js b/dist/dataGrid.min.js
index c0ba104..2789310 100644
--- a/dist/dataGrid.min.js
+++ b/dist/dataGrid.min.js
@@ -1 +1 @@
-!function(){"use strict";function t(t,e){var i=[];return t?(t.forEach(function(t){~i.indexOf(t[e])||i.push(t[e])}),i.map(function(t){return{text:t,value:t}})):void 0}angular.module("dataGrid",[]).filter("startFrom",function(){return function(t,e){return t?(e=+e,t.slice(e)):[]}}).controller("gridController",["$scope","$element","$filter","$location","filtersFactory",function(e,i,r,n,a){function o(){(e.urlSync||e.serverPagination)&&(e.serverPagination&&(clearTimeout(e.getDataTimeout),e.getDataTimeout=setTimeout(l,e.getDataDelay)),e.filtered&&c())}function s(t){var i,r=!1;i="page="+e.paginationOptions.currentPage,e.paginationOptions.itemsPerPage!==e.defaultsPaginationOptions.itemsPerPage&&(i+="&itemsPerPage="+e.paginationOptions.itemsPerPage),e.sortOptions.predicate&&(i+="&sort="+encodeURIComponent(e.sortOptions.predicate+"-"+e.sortOptions.direction)),e.filters.forEach(function(t){var n=t.model,a=t.isInScope?e.$eval(n):e.$parent.$eval(n);if(t.disableUrl)return void(r=!0);if(a){var o;if(a instanceof Date){if(isNaN(a.getTime()))return;o=a.getFullYear()+"-",o+=a.getMonth()<9?"0"+(a.getMonth()+1)+"-":a.getMonth()+1+"-",o+=a.getDate()<10?"0"+a.getDate():a.getDate(),a=o}i+="&"+encodeURIComponent(n)+"="+encodeURIComponent(a)}}),r&&p(),n.search(i),t&&e.$apply()}function c(){var t=n.search(),i={};if(Object.keys(t).forEach(function(e){"page"!==e&&"sort"!==e&&"itemsPerPage"!==e&&(i[e]=t[e])}),e.filters.forEach(function(t){var r=t.model,n=i[r];if(!t.disableUrl){if(~t.filterType.toLowerCase().indexOf("date"))return e.$parent.__evaltmp=n?new Date(n):null,void e.$parent.$eval(r+"=__evaltmp");"select"!==t.filterType||n||(n=""),n&&(t.isInScope?(e.__evaltmp=n,e.$eval(r+"=__evaltmp")):(e.$parent.__evaltmp=n,e.$parent.$eval(r+"=__evaltmp")))}}),e.paginationOptions.itemsPerPage=e.defaultsPaginationOptions.itemsPerPage,e.paginationOptions.currentPage=e.defaultsPaginationOptions.currentPage,t.itemsPerPage&&(e.paginationOptions.itemsPerPage=t.itemsPerPage),t.page&&(!e.serverPagination&&(t.page-1)*e.paginationOptions.itemsPerPage>e.filtered.length?e.paginationOptions.currentPage=1:e.paginationOptions.currentPage=t.page),t.sort){var r=t.sort.split("-");e.sortOptions.predicate=decodeURIComponent(r[0]),e.sortOptions.direction=decodeURIComponent(r[1])}e.serverPagination||p()}function l(){var t="",i=n.search();Object.keys(i).forEach(function(e){t+=e+"="+i[e]+"&"}),t=t.slice(0,-1),!t&&e.sortOptions.predicate?e.sort(e.sortOptions.predicate,!0):e._gridOptions.getData("?"+t,function(t,i){e.filtered=t,e.paginationOptions.totalItems=i})}function p(){var t=Date.now(),i=!1;e._time={},e.sortOptions.predicate&&e.sortCache&&e.sortCache.predicate===e.sortOptions.predicate&&e.sortCache.direction===e.sortOptions.direction?(e.filtered=e.sortCache.data.slice(),i=!0):e.filtered=e._gridOptions.data.slice(),e._time.copy=Date.now()-t;var n=Date.now();d(),e._time.filters=Date.now()-n;var a=Date.now();e.sortOptions.predicate&&!i&&(e.filtered=r("orderBy")(e.filtered,e.sortOptions.predicate,"desc"===e.sortOptions.direction),e.sortCache={data:e.filtered.slice(),predicate:e.sortOptions.predicate,direction:e.sortOptions.direction}),e._time.sort=Date.now()-a,e._time.all=Date.now()-t,e.paginationOptions.totalItems=e.filtered.length}function d(){e.filters.forEach(function(t){var i=t.filterBy,r=t.model,n=t.isInScope?e.$eval(r):e.$parent.$eval(r),o=t.filterType;if(e.customFilters[r])e.filtered=e.customFilters[r](e.filtered,n,i);else if(n&&o){var s=a.getFilterByType(o);s&&(e.filtered=s(e.filtered,n,i))}})}e._gridOptions=e.$eval(i.attr("grid-options")),e._gridActions=e.$eval(i.attr("grid-actions")),e.serverPagination="true"===i.attr("server-pagination"),e.getDataDelay=i.attr("get-delay")||350,e._gridActions||(e.$parent.$eval(i.attr("grid-actions")+"= {}"),e._gridActions=e.$parent.$eval(i.attr("grid-actions"))),e._gridOptions.grid=e,e.filtered=e._gridOptions.data.slice(),e.paginationOptions=e._gridOptions.pagination?angular.copy(e._gridOptions.pagination):{},e.defaultsPaginationOptions={itemsPerPage:e.paginationOptions.itemsPerPage||"10",currentPage:e.paginationOptions.currentPage||1},e.paginationOptions=angular.copy(e.defaultsPaginationOptions),e.sortOptions=e._gridOptions.sort?angular.copy(e._gridOptions.sort):{},e.customFilters=e._gridOptions.customFilters?angular.copy(e._gridOptions.customFilters):{},e.urlSync=e._gridOptions.urlSync,e.$watch("_gridOptions.data",function(i){i&&i.length>-1&&(e.sortCache={},e.filtered=e._gridOptions.data.slice(),e.filters.forEach(function(i){"select"===i.filterType&&(e[i.model+"Options"]=t(e.filtered,i.filterBy))}),e.urlSync?c():p())}),e.sort=function(t,i){if(!i){var r=e.sortOptions.predicate===t&&"desc"===e.sortOptions.direction?"asc":"desc";e.sortOptions.direction=r,e.sortOptions.predicate=t}e.paginationOptions.currentPage=1,e.reloadGrid(i)},e.filter=function(){e.paginationOptions.currentPage=1,e.reloadGrid()},e.$on("$locationChangeSuccess",function(){o()}),e.$on("$stateChangeSuccess",function(t,e){o()}),e.reloadGrid=function(t){e.urlSync||e.serverPagination?s(t):p()},e._gridActions.refresh=e.reloadGrid,e._gridActions.filter=e.filter,e._gridActions.sort=e.sort}]).directive("gridItem",["$compile",function(t){return{restrict:"EA",terminal:!0,scope:!1,link:function(e,i,r,n,a){e.serverPagination?i.attr("ng-repeat","item in filtered"):i.attr("ng-repeat","item in filtered | startFrom:(paginationOptions.currentPage-1)*paginationOptions.itemsPerPage | limitTo:paginationOptions.itemsPerPage track by $index"),i.removeAttr("grid-item");var o=i[0].outerHTML;i.replaceWith(t(o)(e))}}}]).directive("gridData",["$compile","$animate",function(e){return{restrict:"EA",scope:!0,controller:"gridController",link:function(i,r,n){var a=[],o=r.parent(),s=n.id,c="true"===n.serverPagination;i.serverPagination=c,angular.forEach(angular.element(o[0].querySelectorAll("[sortable]")),function(t){var r=angular.element(t),n=r.attr("sortable");r.attr("ng-class","{'sort-ascent' : sortOptions.predicate ==='"+n+"' && sortOptions.direction === 'asc', 'sort-descent' : sortOptions.predicate === '"+n+"' && sortOptions.direction === 'desc'}"),r.attr("ng-click","sort('"+n+"')"),e(r)(i)}),angular.forEach(document.querySelectorAll("[filter-by]"),function(e){var n=angular.element(e),o=n.attr("filter-by"),c=document.querySelectorAll("[grid-data]")[0],l=c.querySelectorAll('[filter-by="'+o+'"]').length>0,p=n.attr("filter-type")||"",d=n.attr("ng-model"),g=n.attr("disable-url");s&&n.attr("grid-id")&&s!=n.attr("grid-id")||("select"!==p||(i[d+"Options"]=t(i.$eval(r.attr("grid-options")+".data"),o)),!~p.indexOf("date")||n.attr("ng-focus")||n.attr("ng-blur")||(n.attr("ng-focus","filter('{"+d+" : this."+d+"}')"),n.attr("ng-blur","filter('{"+d+" : this."+d+"}')")),d||(d=o,n.attr("ng-model",o),n.attr("ng-change","filter()")),a.push({model:d,isInScope:l,filterBy:o,filterType:p,disableUrl:g}))}),i.filters=a}}}]).factory("filtersFactory",function(){function t(t,e,i){return t.filter(function(t){return e&&t[i]?t[i]===e:!0})}function e(t,e,i){return t.filter(function(t){return e&&t[i]?~(t[i]+"").toLowerCase().indexOf((e+"").toLowerCase()):!!t[i]})}function i(t,e,i){return e=new Date(e).getTime(),t.filter(function(t){return e&&t[i]?t[i]<=e+86399999:!0})}function r(t,e,i){return e=new Date(e).getTime(),t.filter(function(t){return e&&t[i]?t[i]>=e:!0})}return{getFilterByType:function(n){switch(n){case"select":return t;case"text":return e;case"dateTo":return i;case"dateFrom":return r;default:return null}}}})}();
\ No newline at end of file
+!function(){"use strict";function t(t,e){var i=[];if(t)return t.forEach(function(t){~i.indexOf(t[e])||i.push(t[e])}),i.map(function(t){return{text:t,value:t}})}angular.module("dataGrid",[]).filter("startFrom",function(){return function(t,e){return t?(e=+e,t.slice(e)):[]}}).controller("gridController",["$scope","$rootScope","$element","$filter","$location","filtersFactory",function(e,i,r,n,a,o){function s(){(e.urlSync||e.serverPagination)&&(e.serverPagination&&(clearTimeout(e.getDataTimeout),e.getDataTimeout=setTimeout(p,e.getDataDelay)),e.filtered&&l())}function c(t){var i,r=!1;i="page="+e.paginationOptions.currentPage,e.paginationOptions.itemsPerPage!==e.defaultsPaginationOptions.itemsPerPage&&(i+="&itemsPerPage="+e.paginationOptions.itemsPerPage),e.sortOptions.predicate&&(i+="&sort="+encodeURIComponent(e.sortOptions.predicate+"-"+e.sortOptions.direction)),e.filters.forEach(function(t){var n=t.model,a=t.isInScope?e.$eval(n):e.$parent.$eval(n);if(t.disableUrl)return void(r=!0);if(a){var o;if(a instanceof Date){if(isNaN(a.getTime()))return;o=a.getFullYear()+"-",o+=a.getMonth()<9?"0"+(a.getMonth()+1)+"-":a.getMonth()+1+"-",o+=a.getDate()<10?"0"+a.getDate():a.getDate(),a=o}i+="&"+encodeURIComponent(n)+"="+encodeURIComponent(a)}}),r&&d(),a.search(i),t&&e.$apply()}function l(){var t=a.search(),i={};if(Object.keys(t).forEach(function(e){"page"!==e&&"sort"!==e&&"itemsPerPage"!==e&&(i[e]=t[e])}),e.filters.forEach(function(t){var r=t.model,n=i[r];if(!t.disableUrl){if(~t.filterType.toLowerCase().indexOf("date"))return e.$parent.__evaltmp=n?new Date(n):null,void e.$parent.$eval(r+"=__evaltmp");"select"!==t.filterType||n||(n=""),n&&(t.isInScope?(e.__evaltmp=n,e.$eval(r+"=__evaltmp")):(e.$parent.__evaltmp=n,e.$parent.$eval(r+"=__evaltmp")))}}),e.paginationOptions.itemsPerPage=e.defaultsPaginationOptions.itemsPerPage,e.paginationOptions.currentPage=e.defaultsPaginationOptions.currentPage,t.itemsPerPage&&(e.paginationOptions.itemsPerPage=t.itemsPerPage),t.page&&(!e.serverPagination&&(t.page-1)*e.paginationOptions.itemsPerPage>e.filtered.length?e.paginationOptions.currentPage=1:e.paginationOptions.currentPage=t.page),t.sort){var r=t.sort.split("-");e.sortOptions.predicate=decodeURIComponent(r[0]),e.sortOptions.direction=decodeURIComponent(r[1])}e.serverPagination||d()}function p(){var t="",i=a.search();Object.keys(i).forEach(function(e){t+=e+"="+i[e]+"&"}),t=t.slice(0,-1),!t&&e.sortOptions.predicate?e.sort(e.sortOptions.predicate,!0):e._gridOptions.getData("?"+t,function(t,i){e.filtered=t,e.paginationOptions.totalItems=i})}function d(){var t=Date.now(),i=!1;e._time={},e.sortOptions.predicate&&e.sortCache&&e.sortCache.predicate===e.sortOptions.predicate&&e.sortCache.direction===e.sortOptions.direction?(e.filtered=e.sortCache.data.slice(),i=!0):e.filtered=e._gridOptions.data.slice(),e._time.copy=Date.now()-t;var r=Date.now();g(),e._time.filters=Date.now()-r;var a=Date.now();e.sortOptions.predicate&&!i&&(e.filtered=n("orderBy")(e.filtered,e.sortOptions.predicate,"desc"===e.sortOptions.direction),e.sortCache={data:e.filtered.slice(),predicate:e.sortOptions.predicate,direction:e.sortOptions.direction}),e._time.sort=Date.now()-a,e._time.all=Date.now()-t,e.paginationOptions.totalItems=e.filtered.length}function g(){e.filters.forEach(function(t){var i=t.filterBy,r=t.model,n=t.isInScope?e.$eval(r):e.$parent.$eval(r),a=t.filterType;if(e.customFilters[r])e.filtered=e.customFilters[r](e.filtered,n,i);else if(n&&a){var s=o.getFilterByType(a);s&&(e.filtered=s(e.filtered,n,i))}})}e._gridOptions=e.$eval(r.attr("grid-options")),e._gridActions=e.$eval(r.attr("grid-actions")),e.serverPagination="true"===r.attr("server-pagination"),e.getDataDelay=r.attr("get-delay")||350,e._gridActions||(e.$parent.$eval(r.attr("grid-actions")+"= {}"),e._gridActions=e.$parent.$eval(r.attr("grid-actions"))),e._gridOptions.grid=e,e.filtered=e._gridOptions.data.slice(),e.paginationOptions=e._gridOptions.pagination?angular.copy(e._gridOptions.pagination):{},e.defaultsPaginationOptions={itemsPerPage:e.paginationOptions.itemsPerPage||"10",currentPage:e.paginationOptions.currentPage||1},e.paginationOptions=angular.copy(e.defaultsPaginationOptions),e.sortOptions=e._gridOptions.sort?angular.copy(e._gridOptions.sort):{},e.customFilters=e._gridOptions.customFilters?angular.copy(e._gridOptions.customFilters):{},e.urlSync=e._gridOptions.urlSync,e.$watch("_gridOptions.data",function(i){i&&i.length>-1&&(e.sortCache={},e.filtered=e._gridOptions.data.slice(),e.filters.forEach(function(i){"select"===i.filterType&&(e[i.model+"Options"]=t(e.filtered,i.filterBy))}),e.urlSync?l():d())}),e.sort=function(t,i){if(!i){var r=e.sortOptions.predicate===t&&"desc"===e.sortOptions.direction?"asc":"desc";e.sortOptions.direction=r,e.sortOptions.predicate=t}e.paginationOptions.currentPage=1,e.reloadGrid(i)},e.filter=function(){e.paginationOptions.currentPage=1,e.reloadGrid()},e.$on("$locationChangeSuccess",function(){s()}),e.$on("$stateChangeSuccess",function(t,e){s()}),e.reloadGrid=function(t){e.urlSync||e.serverPagination?c(t):d(),i.$broadcast("gridReloaded")},e._gridActions.refresh=e.reloadGrid,e._gridActions.filter=e.filter,e._gridActions.sort=e.sort}]).directive("gridItem",["$compile",function(t){return{restrict:"EA",terminal:!0,scope:!1,link:function(e,i,r,n,a){e.serverPagination?i.attr("ng-repeat","item in filtered"):i.attr("ng-repeat","item in filtered | startFrom:(paginationOptions.currentPage-1)*paginationOptions.itemsPerPage | limitTo:paginationOptions.itemsPerPage track by $index"),i.removeAttr("grid-item");var o=i[0].outerHTML;i.replaceWith(t(o)(e))}}}]).directive("gridData",["$compile","$animate",function(e){return{restrict:"EA",scope:!0,controller:"gridController",link:function(i,r,n){var a=[],o=r.parent(),s=n.id,c="true"===n.serverPagination;i.serverPagination=c,angular.forEach(angular.element(o[0].querySelectorAll("[sortable]")),function(t){var r=angular.element(t),n=r.attr("sortable");r.attr("ng-class","{'sort-ascent' : sortOptions.predicate ==='"+n+"' && sortOptions.direction === 'asc', 'sort-descent' : sortOptions.predicate === '"+n+"' && sortOptions.direction === 'desc'}"),r.attr("ng-click","sort('"+n+"')"),e(r)(i)}),angular.forEach(document.querySelectorAll("[filter-by]"),function(e){var n=angular.element(e),o=n.attr("filter-by"),c=document.querySelectorAll("[grid-data]")[0],l=c.querySelectorAll('[filter-by="'+o+'"]').length>0,p=n.attr("filter-type")||"",d=n.attr("ng-model"),g=n.attr("disable-url");s&&n.attr("grid-id")&&s!=n.attr("grid-id")||("select"!==p||(i[d+"Options"]=t(i.$eval(r.attr("grid-options")+".data"),o)),!~p.indexOf("date")||n.attr("ng-focus")||n.attr("ng-blur")||(n.attr("ng-focus","filter('{"+d+" : this."+d+"}')"),n.attr("ng-blur","filter('{"+d+" : this."+d+"}')")),d||(d=o,n.attr("ng-model",o),n.attr("ng-change","filter()")),a.push({model:d,isInScope:l,filterBy:o,filterType:p,disableUrl:g}))}),i.filters=a}}}]).factory("filtersFactory",function(){function t(t,e,i){return t.filter(function(t){return!e||!t[i]||t[i]===e})}function e(t,e,i){return t.filter(function(t){return e&&t[i]?~(t[i]+"").toLowerCase().indexOf((e+"").toLowerCase()):!!t[i]})}function i(t,e,i){return e=new Date(e).getTime(),t.filter(function(t){return!e||!t[i]||t[i]<=e+86399999})}function r(t,e,i){return e=new Date(e).getTime(),t.filter(function(t){return!e||!t[i]||t[i]>=e})}return{getFilterByType:function(n){switch(n){case"select":return t;case"text":return e;case"dateTo":return i;case"dateFrom":return r;default:return null}}}})}();
\ No newline at end of file
diff --git a/dist/dataGridUtils.js b/dist/dataGridUtils.js
new file mode 100644
index 0000000..06f4061
--- /dev/null
+++ b/dist/dataGridUtils.js
@@ -0,0 +1,89 @@
+(function () {
+    'use strict';
+    angular.module('dataGridUtils', []);
+})();
+(function () {
+    'use strict';
+    angular.module('dataGridUtils.fixedHeader', [])
+        .directive('fixedHeader', FixedHeader);
+
+    FixedHeader.$inject = ['$window', '$timeout'];
+
+    function FixedHeader($window, $timeout) {
+        var window = angular.element($window);
+
+        return {
+            restrict: 'A',
+            link: link
+        };
+
+        function link(scope, element, attrs) {
+            var elementOffsetFrom = attrs.offsetFromElement ?
+                document.querySelector(attrs.offsetFromElement) :
+                window;
+
+            function onResize() {
+                var thElements = element.find("th");
+                for (var i = 0; i < thElements.length; i++) {
+                    var tdElement = element.find("td").eq(i)[0];
+                    if (!tdElement) {
+                        return;
+                    }
+                    var tdElementWidth = tdElement.offsetWidth;
+                    angular.element(thElements[i]).css({'width': tdElementWidth + 'px'});
+                }
+            }
+
+            function bindFixedToHeader() {
+                var thead = element.find("thead"),
+                    tbody = element.find("tbody"),
+                    tbodyLeftPos = tbody[0].getBoundingClientRect().left;
+                thead.addClass('fixed-header');
+                if (attrs.offsetFromElement) {
+                    var topElement = document.querySelector(attrs.offsetFromElement);
+                    var offset = topElement.getBoundingClientRect().top + topElement.offsetHeight;
+                    thead.css({"top": offset});
+                }
+                thead.css({"left": tbodyLeftPos});
+                tbody.addClass("tbody-offset");
+            }
+
+            function unBindFixedToHeader() {
+                var thead = element.find("thead"),
+                    tbody = element.find("tbody");
+                thead.removeClass('fixed-header');
+                thead.css({"left": ""});
+                thead.css({"top": ""});
+                tbody.removeClass("tbody-offset");
+            }
+
+            function onScroll() {
+                var offset = attrs.offsetFromElement ?
+                        elementOffsetFrom.getBoundingClientRect().top + elementOffsetFrom.offsetHeight :
+                        $window.pageYOffset,
+                    tableOffsetTop = attrs.offsetFromElement ?
+                        element[0].getBoundingClientRect().top :
+                        element[0].getBoundingClientRect().top + offset,
+                    tableOffsetBottom = tableOffsetTop + element[0].offsetHeight - element.find("thead")[0].offsetHeight;
+
+                if (offset < tableOffsetTop || offset > tableOffsetBottom) {
+                    unBindFixedToHeader();
+                }
+                else if (offset >= tableOffsetTop && offset <= tableOffsetBottom) {
+                    bindFixedToHeader();
+                }
+                onResize();
+            }
+
+            scope.$on('gridReloaded', function () {
+                $timeout(function () {
+                    onResize();
+                    onScroll();
+                }, 0);
+            });
+            window.on('resize', onResize);
+            window.on('scroll', onScroll);
+        }
+    }
+
+})();
\ No newline at end of file
diff --git a/dist/dataGridUtils.min.js b/dist/dataGridUtils.min.js
new file mode 100644
index 0000000..fa1410f
--- /dev/null
+++ b/dist/dataGridUtils.min.js
@@ -0,0 +1 @@
+!function(){"use strict";angular.module("dataGridUtils",[])}(),function(){"use strict";function e(e,t){function n(n,f,i){function d(){for(var e=f.find("th"),t=0;t<e.length;t++){var n=f.find("td").eq(t)[0];if(!n)return;var o=n.offsetWidth;angular.element(e[t]).css({width:o+"px"})}}function r(){var e=f.find("thead"),t=f.find("tbody"),n=t[0].getBoundingClientRect().left;if(e.addClass("fixed-header"),i.offsetFromElement){var o=document.querySelector(i.offsetFromElement),d=o.getBoundingClientRect().top+o.offsetHeight;e.css({top:d})}e.css({left:n}),t.addClass("tbody-offset")}function s(){var e=f.find("thead"),t=f.find("tbody");e.removeClass("fixed-header"),e.css({left:""}),e.css({top:""}),t.removeClass("tbody-offset")}function a(){var t=i.offsetFromElement?l.getBoundingClientRect().top+l.offsetHeight:e.pageYOffset,n=i.offsetFromElement?f[0].getBoundingClientRect().top:f[0].getBoundingClientRect().top+t,o=n+f[0].offsetHeight-f.find("thead")[0].offsetHeight;t<n||t>o?s():t>=n&&t<=o&&r(),d()}var l=i.offsetFromElement?document.querySelector(i.offsetFromElement):o;n.$on("gridReloaded",function(){t(function(){d(),a()},0)}),o.on("resize",d),o.on("scroll",a)}var o=angular.element(e);return{restrict:"A",link:n}}angular.module("dataGridUtils.fixedHeader",[]).directive("fixedHeader",e),e.$inject=["$window","$timeout"]}();
\ No newline at end of file
diff --git a/dist/loading-bar.min.js b/dist/loading-bar.min.js
index f0fdc27..2d76439 100644
--- a/dist/loading-bar.min.js
+++ b/dist/loading-bar.min.js
@@ -1 +1 @@
-!function(){"use strict";angular.module("angular-loading-bar",["cfp.loadingBarInterceptor"]),angular.module("chieffancypants.loadingBar",["cfp.loadingBarInterceptor"]),angular.module("cfp.loadingBarInterceptor",["cfp.loadingBar"]).config(["$httpProvider",function(e){var n=["$q","$cacheFactory","$timeout","$rootScope","$log","cfpLoadingBar",function(n,t,a,r,i,c){function o(){a.cancel(d),c.complete(),u=0,s=0}function l(n){var a,r=t.get("$http"),i=e.defaults;!n.cache&&!i.cache||n.cache===!1||"GET"!==n.method&&"JSONP"!==n.method||(a=angular.isObject(n.cache)?n.cache:angular.isObject(i.cache)?i.cache:r);var c=void 0!==a?void 0!==a.get(n.url):!1;return void 0!==n.cached&&c!==n.cached?n.cached:(n.cached=c,c)}var d,s=0,u=0,g=c.latencyThreshold;return{request:function(e){return e.ignoreLoadingBar||l(e)||(r.$broadcast("cfpLoadingBar:loading",{url:e.url}),0===s&&(d=a(function(){c.start()},g)),s++,c.set(u/s)),e},response:function(e){return e&&e.config?(e.config.ignoreLoadingBar||l(e.config)||(u++,r.$broadcast("cfpLoadingBar:loaded",{url:e.config.url,result:e}),u>=s?o():c.set(u/s)),e):(i.error("Broken interceptor detected: Config object not supplied in response:\n https://github.com/chieffancypants/angular-loading-bar/pull/50"),e)},responseError:function(e){return e&&e.config?(e.config.ignoreLoadingBar||l(e.config)||(u++,r.$broadcast("cfpLoadingBar:loaded",{url:e.config.url,result:e}),u>=s?o():c.set(u/s)),n.reject(e)):(i.error("Broken interceptor detected: Config object not supplied in rejection:\n https://github.com/chieffancypants/angular-loading-bar/pull/50"),n.reject(e))}}}];e.interceptors.push(n)}]),angular.module("cfp.loadingBar",[]).provider("cfpLoadingBar",function(){this.includeSpinner=!0,this.includeBar=!0,this.latencyThreshold=100,this.startSize=.02,this.parentSelector="body",this.spinnerTemplate='<div id="loading-bar-spinner"><div class="spinner-icon"></div></div>',this.loadingBarTemplate='<div id="loading-bar"><div class="bar"><div class="peg"></div></div></div>',this.$get=["$injector","$document","$timeout","$rootScope",function(e,n,t,a){function r(){s||(s=e.get("$animate"));var r=n.find(h).eq(0);t.cancel(g),m||(a.$broadcast("cfpLoadingBar:started"),m=!0,b&&s.enter(p,r,angular.element(r[0].lastChild)),$&&s.enter(v,r,angular.element(r[0].lastChild)),i(S))}function i(e){if(m){var n=100*e+"%";f.css("width",n),B=e,t.cancel(u),u=t(function(){c()},250)}}function c(){if(!(o()>=1)){var e=0,n=o();e=n>=0&&.25>n?(3*Math.random()+3)/100:n>=.25&&.65>n?3*Math.random()/100:n>=.65&&.9>n?2*Math.random()/100:n>=.9&&.99>n?.005:0;var t=o()+e;i(t)}}function o(){return B}function l(){B=0,m=!1}function d(){s||(s=e.get("$animate")),a.$broadcast("cfpLoadingBar:completed"),i(1),t.cancel(g),g=t(function(){var e=s.leave(p,l);e&&e.then&&e.then(l),s.leave(v)},500)}var s,u,g,h=this.parentSelector,p=angular.element(this.loadingBarTemplate),f=p.find("div").eq(0),v=angular.element(this.spinnerTemplate),m=!1,B=0,$=this.includeSpinner,b=this.includeBar,S=this.startSize;return{start:r,set:i,status:o,inc:c,complete:d,includeSpinner:this.includeSpinner,latencyThreshold:this.latencyThreshold,parentSelector:this.parentSelector,startSize:this.startSize}}]})}();
\ No newline at end of file
+!function(){"use strict";angular.module("angular-loading-bar",["cfp.loadingBarInterceptor"]),angular.module("chieffancypants.loadingBar",["cfp.loadingBarInterceptor"]),angular.module("cfp.loadingBarInterceptor",["cfp.loadingBar"]).config(["$httpProvider",function(e){var n=["$q","$cacheFactory","$timeout","$rootScope","$log","cfpLoadingBar",function(n,t,a,r,i,c){function o(){a.cancel(d),c.complete(),u=0,s=0}function l(n){var a,r=t.get("$http"),i=e.defaults;!n.cache&&!i.cache||n.cache===!1||"GET"!==n.method&&"JSONP"!==n.method||(a=angular.isObject(n.cache)?n.cache:angular.isObject(i.cache)?i.cache:r);var c=void 0!==a&&void 0!==a.get(n.url);return void 0!==n.cached&&c!==n.cached?n.cached:(n.cached=c,c)}var d,s=0,u=0,g=c.latencyThreshold;return{request:function(e){return e.ignoreLoadingBar||l(e)||(r.$broadcast("cfpLoadingBar:loading",{url:e.url}),0===s&&(d=a(function(){c.start()},g)),s++,c.set(u/s)),e},response:function(e){return e&&e.config?(e.config.ignoreLoadingBar||l(e.config)||(u++,r.$broadcast("cfpLoadingBar:loaded",{url:e.config.url,result:e}),u>=s?o():c.set(u/s)),e):(i.error("Broken interceptor detected: Config object not supplied in response:\n https://github.com/chieffancypants/angular-loading-bar/pull/50"),e)},responseError:function(e){return e&&e.config?(e.config.ignoreLoadingBar||l(e.config)||(u++,r.$broadcast("cfpLoadingBar:loaded",{url:e.config.url,result:e}),u>=s?o():c.set(u/s)),n.reject(e)):(i.error("Broken interceptor detected: Config object not supplied in rejection:\n https://github.com/chieffancypants/angular-loading-bar/pull/50"),n.reject(e))}}}];e.interceptors.push(n)}]),angular.module("cfp.loadingBar",[]).provider("cfpLoadingBar",function(){this.includeSpinner=!0,this.includeBar=!0,this.latencyThreshold=100,this.startSize=.02,this.parentSelector="body",this.spinnerTemplate='<div id="loading-bar-spinner"><div class="spinner-icon"></div></div>',this.loadingBarTemplate='<div id="loading-bar"><div class="bar"><div class="peg"></div></div></div>',this.$get=["$injector","$document","$timeout","$rootScope",function(e,n,t,a){function r(){s||(s=e.get("$animate"));var r=n.find(h).eq(0);t.cancel(g),m||(a.$broadcast("cfpLoadingBar:started"),m=!0,b&&s.enter(p,r,angular.element(r[0].lastChild)),$&&s.enter(v,r,angular.element(r[0].lastChild)),i(S))}function i(e){if(m){var n=100*e+"%";f.css("width",n),B=e,t.cancel(u),u=t(function(){c()},250)}}function c(){if(!(o()>=1)){var e=0,n=o();e=n>=0&&n<.25?(3*Math.random()+3)/100:n>=.25&&n<.65?3*Math.random()/100:n>=.65&&n<.9?2*Math.random()/100:n>=.9&&n<.99?.005:0;var t=o()+e;i(t)}}function o(){return B}function l(){B=0,m=!1}function d(){s||(s=e.get("$animate")),a.$broadcast("cfpLoadingBar:completed"),i(1),t.cancel(g),g=t(function(){var e=s.leave(p,l);e&&e.then&&e.then(l),s.leave(v)},500)}var s,u,g,h=this.parentSelector,p=angular.element(this.loadingBarTemplate),f=p.find("div").eq(0),v=angular.element(this.spinnerTemplate),m=!1,B=0,$=this.includeSpinner,b=this.includeBar,S=this.startSize;return{start:r,set:i,status:o,inc:c,complete:d,includeSpinner:this.includeSpinner,latencyThreshold:this.latencyThreshold,parentSelector:this.parentSelector,startSize:this.startSize}}]})}();
\ No newline at end of file
diff --git a/dist/pagination.min.js b/dist/pagination.min.js
index 3dcecb4..eea082a 100644
--- a/dist/pagination.min.js
+++ b/dist/pagination.min.js
@@ -1 +1 @@
-!function(){"use strict";angular.module("paging",[]).factory("paging",["$parse",function(e){return{create:function(a,n,t){a.setNumPages=t.numPages?e(t.numPages).assign:angular.noop,a.ngModelCtrl={$setViewValue:angular.noop},a.init=function(i,r){a.ngModelCtrl=i,a.config=r,i.$render=function(){a.render()},t.itemsPerPage?n.$parent.$watch(e(t.itemsPerPage),function(e){a.itemsPerPage=parseInt(e,10),n.totalPages=a.calculateTotalPages(),a.updatePage()}):a.itemsPerPage=r.itemsPerPage,n.$watch("totalItems",function(e,t){(angular.isDefined(e)||e!==t)&&(n.totalPages=a.calculateTotalPages(),a.updatePage())})},a.calculateTotalPages=function(){var e=a.itemsPerPage<1?1:Math.ceil(n.totalItems/a.itemsPerPage);return Math.max(e||0,1)},a.render=function(){n.page=parseInt(a.ngModelCtrl.$viewValue,10)||1},n.selectPage=function(e,t){t&&t.preventDefault();var i=!n.ngDisabled||!t;i&&n.page!==e&&e>0&&e<=n.totalPages&&(t&&t.target&&t.target.blur(),a.ngModelCtrl.$setViewValue(e),a.ngModelCtrl.$render())},n.getText=function(e){return n[e+"Text"]||a.config[e+"Text"]},n.noPrevious=function(){return 1===n.page},n.noNext=function(){return n.page===n.totalPages},a.updatePage=function(){a.setNumPages(n.$parent,n.totalPages),n.page>n.totalPages?n.selectPage(n.totalPages):a.ngModelCtrl.$render()}}}}]),angular.module("pagination",["paging"]).controller("PaginationController",["$scope","$attrs","$parse","paging","paginationConfig",function(e,a,n,t,i){function r(e,a,n){return{number:e,text:a,active:n}}function s(e,a){var n=[],t=1,i=a,s=angular.isDefined(g)&&a>g;s&&(o?(t=Math.max(e-Math.floor(g/2),1),i=t+g-1,i>a&&(i=a,t=i-g+1)):(t=(Math.ceil(e/g)-1)*g+1,i=Math.min(t+g-1,a)));for(var l=t;i>=l;l++){var p=r(l,l,l===e);n.push(p)}if(s&&g>0&&(!o||u||c)){if(t>1){if(!c||t>3){var f=r(t-1,"...",!1);n.unshift(f)}if(c){if(3===t){var d=r(2,"2",!1);n.unshift(d)}var P=r(1,"1",!1);n.unshift(P)}}if(a>i){if(!c||a-2>i){var v=r(i+1,"...",!1);n.push(v)}if(c){if(i===a-2){var m=r(a-1,a-1,!1);n.push(m)}var $=r(a,a,!1);n.push($)}}}return n}var l=this,g=angular.isDefined(a.maxSize)?e.$parent.$eval(a.maxSize):i.maxSize,o=angular.isDefined(a.rotate)?e.$parent.$eval(a.rotate):i.rotate,u=angular.isDefined(a.forceEllipses)?e.$parent.$eval(a.forceEllipses):i.forceEllipses,c=angular.isDefined(a.boundaryLinkNumbers)?e.$parent.$eval(a.boundaryLinkNumbers):i.boundaryLinkNumbers;e.boundaryLinks=angular.isDefined(a.boundaryLinks)?e.$parent.$eval(a.boundaryLinks):i.boundaryLinks,e.directionLinks=angular.isDefined(a.directionLinks)?e.$parent.$eval(a.directionLinks):i.directionLinks,t.create(this,e,a),a.maxSize&&e.$parent.$watch(n(a.maxSize),function(e){g=parseInt(e,10),l.render()});var p=this.render;this.render=function(){p(),e.page>0&&e.page<=e.totalPages&&(e.pages=s(e.page,e.totalPages))}}]).constant("paginationConfig",{itemsPerPage:10,boundaryLinks:!1,boundaryLinkNumbers:!1,directionLinks:!0,firstText:"First",previousText:"Previous",nextText:"Next",lastText:"Last",rotate:!0,forceEllipses:!1}).directive("gridPagination",["$parse","paginationConfig",function(e,a){return{scope:{totalItems:"=",firstText:"@",previousText:"@",nextText:"@",lastText:"@",ngDisabled:"="},require:["gridPagination","?ngModel"],controller:"PaginationController",controllerAs:"pagination",templateUrl:function(e,a){return a.templateUrl||"src/template/pagination/pagination.html"},replace:!0,link:function(e,n,t,i){var r=i[0],s=i[1];s&&r.init(s,a)}}}]).run(["$templateCache",function(e){e.put("src/template/pagination/pagination.html","<ul class='pagination'><li ng-if='::boundaryLinks' ng-class='{disabled: noPrevious()||ngDisabled}' class='pagination-first'><a href ng-click='selectPage(1, $event)'>{{::getText('first')}}</a></li> <li ng-if='::directionLinks' ng-class='{disabled: noPrevious()||ngDisabled}' class='pagination-prev'><a href ng-click='selectPage(page - 1, $event)'>{{::getText('previous')}}</a></li> <li ng-repeat='page in pages track by $index' ng-class='{active: page.active,disabled: ngDisabled&&!page.active}' class='pagination-page'><a href ng-click='selectPage(page.number, $event)'>{{page.text}}</a></li> <li ng-if='::directionLinks' ng-class='{disabled: noNext()||ngDisabled}' class='pagination-next'><a href ng-click='selectPage(page + 1, $event)'>{{::getText('next')}}</a></li> <li ng-if='::boundaryLinks' ng-class='{disabled: noNext()||ngDisabled}' class='pagination-last'><a href ng-click='selectPage(totalPages, $event)'>{{::getText('last')}}</a></li> </ul>")}])}();
\ No newline at end of file
+!function(){"use strict";angular.module("paging",[]).factory("paging",["$parse",function(e){return{create:function(a,n,t){a.setNumPages=t.numPages?e(t.numPages).assign:angular.noop,a.ngModelCtrl={$setViewValue:angular.noop},a.init=function(i,r){a.ngModelCtrl=i,a.config=r,i.$render=function(){a.render()},t.itemsPerPage?n.$parent.$watch(e(t.itemsPerPage),function(e){a.itemsPerPage=parseInt(e,10),n.totalPages=a.calculateTotalPages(),a.updatePage()}):a.itemsPerPage=r.itemsPerPage,n.$watch("totalItems",function(e,t){(angular.isDefined(e)||e!==t)&&(n.totalPages=a.calculateTotalPages(),a.updatePage())})},a.calculateTotalPages=function(){var e=a.itemsPerPage<1?1:Math.ceil(n.totalItems/a.itemsPerPage);return Math.max(e||0,1)},a.render=function(){n.page=parseInt(a.ngModelCtrl.$viewValue,10)||1},n.selectPage=function(e,t){t&&t.preventDefault();var i=!n.ngDisabled||!t;i&&n.page!==e&&e>0&&e<=n.totalPages&&(t&&t.target&&t.target.blur(),a.ngModelCtrl.$setViewValue(e),a.ngModelCtrl.$render())},n.getText=function(e){return n[e+"Text"]||a.config[e+"Text"]},n.noPrevious=function(){return 1===n.page},n.noNext=function(){return n.page===n.totalPages},a.updatePage=function(){a.setNumPages(n.$parent,n.totalPages),n.page>n.totalPages?n.selectPage(n.totalPages):a.ngModelCtrl.$render()}}}}]),angular.module("pagination",["paging"]).controller("PaginationController",["$scope","$attrs","$parse","paging","paginationConfig",function(e,a,n,t,i){function r(e,a,n){return{number:e,text:a,active:n}}function s(e,a){var n=[],t=1,i=a,s=angular.isDefined(g)&&g<a;s&&(o?(t=Math.max(e-Math.floor(g/2),1),i=t+g-1,i>a&&(i=a,t=i-g+1)):(t=(Math.ceil(e/g)-1)*g+1,i=Math.min(t+g-1,a)));for(var l=t;l<=i;l++){var p=r(l,l,l===e);n.push(p)}if(s&&g>0&&(!o||u||c)){if(t>1){if(!c||t>3){var f=r(t-1,"...",!1);n.unshift(f)}if(c){if(3===t){var d=r(2,"2",!1);n.unshift(d)}var P=r(1,"1",!1);n.unshift(P)}}if(i<a){if(!c||i<a-2){var v=r(i+1,"...",!1);n.push(v)}if(c){if(i===a-2){var m=r(a-1,a-1,!1);n.push(m)}var $=r(a,a,!1);n.push($)}}}return n}var l=this,g=angular.isDefined(a.maxSize)?e.$parent.$eval(a.maxSize):i.maxSize,o=angular.isDefined(a.rotate)?e.$parent.$eval(a.rotate):i.rotate,u=angular.isDefined(a.forceEllipses)?e.$parent.$eval(a.forceEllipses):i.forceEllipses,c=angular.isDefined(a.boundaryLinkNumbers)?e.$parent.$eval(a.boundaryLinkNumbers):i.boundaryLinkNumbers;e.boundaryLinks=angular.isDefined(a.boundaryLinks)?e.$parent.$eval(a.boundaryLinks):i.boundaryLinks,e.directionLinks=angular.isDefined(a.directionLinks)?e.$parent.$eval(a.directionLinks):i.directionLinks,t.create(this,e,a),a.maxSize&&e.$parent.$watch(n(a.maxSize),function(e){g=parseInt(e,10),l.render()});var p=this.render;this.render=function(){p(),e.page>0&&e.page<=e.totalPages&&(e.pages=s(e.page,e.totalPages))}}]).constant("paginationConfig",{itemsPerPage:10,boundaryLinks:!1,boundaryLinkNumbers:!1,directionLinks:!0,firstText:"First",previousText:"Previous",nextText:"Next",lastText:"Last",rotate:!0,forceEllipses:!1}).directive("gridPagination",["$parse","paginationConfig",function(e,a){return{scope:{totalItems:"=",firstText:"@",previousText:"@",nextText:"@",lastText:"@",ngDisabled:"="},require:["gridPagination","?ngModel"],controller:"PaginationController",controllerAs:"pagination",templateUrl:function(e,a){return a.templateUrl||"src/template/pagination/pagination.html"},replace:!0,link:function(e,n,t,i){var r=i[0],s=i[1];s&&r.init(s,a)}}}]).run(["$templateCache",function(e){e.put("src/template/pagination/pagination.html","<ul class='pagination'><li ng-if='::boundaryLinks' ng-class='{disabled: noPrevious()||ngDisabled}' class='pagination-first'><a href ng-click='selectPage(1, $event)'>{{::getText('first')}}</a></li> <li ng-if='::directionLinks' ng-class='{disabled: noPrevious()||ngDisabled}' class='pagination-prev'><a href ng-click='selectPage(page - 1, $event)'>{{::getText('previous')}}</a></li> <li ng-repeat='page in pages track by $index' ng-class='{active: page.active,disabled: ngDisabled&&!page.active}' class='pagination-page'><a href ng-click='selectPage(page.number, $event)'>{{page.text}}</a></li> <li ng-if='::directionLinks' ng-class='{disabled: noNext()||ngDisabled}' class='pagination-next'><a href ng-click='selectPage(page + 1, $event)'>{{::getText('next')}}</a></li> <li ng-if='::boundaryLinks' ng-class='{disabled: noNext()||ngDisabled}' class='pagination-last'><a href ng-click='selectPage(totalPages, $event)'>{{::getText('last')}}</a></li> </ul>")}])}();
\ No newline at end of file
diff --git a/gulpfile.js b/gulpfile.js
index d3a2af8..cea1115 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -21,7 +21,7 @@
     }
 
     gulp.task('js', function () {
-        gulp.src(['./src/**/*.js'])
+        gulp.src(['./src/js/vendors/*.js', './src/js/*.js'])
             .pipe(rename({dirname: ''}))
             .pipe(gulp.dest('./dist'))
             .pipe(uglify())
@@ -29,6 +29,15 @@
                 suffix: ".min"
             }))
             .pipe(gulp.dest('./dist'));
+
+        gulp.src(['./src/js/directives/**/*.js'])
+            .pipe(concat('dataGridUtils.js'))
+            .pipe(gulp.dest('./dist'))
+            .pipe(uglify())
+            .pipe(rename({
+                suffix: ".min"
+            }))
+            .pipe(gulp.dest('./dist'));
     });
 
     gulp.task('sass', function () {
@@ -41,6 +50,15 @@
         gulp.src('./demo/100k/scss/angular-data-grid.bootstrap.scss')
             .pipe(sass().on('error', sass.logError))
             .pipe(gulp.dest('./demo/100k/css/'));
+        gulp.src('./demo/fixed-header/scss/fixed-header.bootstrap.scss')
+            .pipe(sass().on('error', sass.logError))
+            .pipe(gulp.dest('./demo/fixed-header/css/'));
+        gulp.src('./demo/fixed-header/scss/fixed-header.material.scss')
+            .pipe(sass().on('error', sass.logError))
+            .pipe(gulp.dest('./demo/fixed-header/css/'));
+        gulp.src('./src/js/directives/fixedHeader/fixed-header.scss')
+            .pipe(sass().on('error', sass.logError))
+            .pipe(gulp.dest('./dist/css/fixedHeader/'));
     });
 
     gulp.task('build', ['js', 'sass']);
diff --git a/src/js/dataGrid.js b/src/js/dataGrid.js
index 1ae356c..7ed9847 100644
--- a/src/js/dataGrid.js
+++ b/src/js/dataGrid.js
@@ -12,7 +12,7 @@
                 return [];
             }
         })
-        .controller('gridController', ['$scope', '$element', '$filter', '$location', 'filtersFactory', function ($scope, $element, $filter, $location, filtersFactory) {
+        .controller('gridController', ['$scope', '$rootScope', '$element', '$filter', '$location', 'filtersFactory', function ($scope, $rootScope, $element, $filter, $location, filtersFactory) {
             // values by default
             $scope._gridOptions = $scope.$eval($element.attr('grid-options'));
             $scope._gridActions = $scope.$eval($element.attr('grid-actions'));
@@ -84,6 +84,7 @@
                 } else {
                     applyFilters();
                 }
+                $rootScope.$broadcast('gridReloaded');
             };
 
             $scope._gridActions.refresh = $scope.reloadGrid;
diff --git a/src/js/directives/dataGridUtils.js b/src/js/directives/dataGridUtils.js
new file mode 100644
index 0000000..11f7813
--- /dev/null
+++ b/src/js/directives/dataGridUtils.js
@@ -0,0 +1,4 @@
+(function () {
+    'use strict';
+    angular.module('dataGridUtils', []);
+})();
\ No newline at end of file
diff --git a/src/js/directives/fixedHeader/fixed-header.scss b/src/js/directives/fixedHeader/fixed-header.scss
new file mode 100644
index 0000000..eeea5eb
--- /dev/null
+++ b/src/js/directives/fixedHeader/fixed-header.scss
@@ -0,0 +1,15 @@
+//Here are described styles that are used bu fixed-header directive
+.fixed-header {
+  top: 0;
+  position: fixed;
+  width: auto;
+  display: table;
+  z-index: 99;
+}
+
+.tbody-offset {
+  &:before {
+    content: " ";
+    display: block;
+  }
+}
\ No newline at end of file
diff --git a/src/js/directives/fixedHeader/fixedHeader.js b/src/js/directives/fixedHeader/fixedHeader.js
new file mode 100644
index 0000000..8242357
--- /dev/null
+++ b/src/js/directives/fixedHeader/fixedHeader.js
@@ -0,0 +1,85 @@
+(function () {
+    'use strict';
+    angular.module('dataGridUtils.fixedHeader', [])
+        .directive('fixedHeader', FixedHeader);
+
+    FixedHeader.$inject = ['$window', '$timeout'];
+
+    function FixedHeader($window, $timeout) {
+        var window = angular.element($window);
+
+        return {
+            restrict: 'A',
+            link: link
+        };
+
+        function link(scope, element, attrs) {
+            var elementOffsetFrom = attrs.offsetFromElement ?
+                document.querySelector(attrs.offsetFromElement) :
+                window;
+
+            function onResize() {
+                var thElements = element.find("th");
+                for (var i = 0; i < thElements.length; i++) {
+                    var tdElement = element.find("td").eq(i)[0];
+                    if (!tdElement) {
+                        return;
+                    }
+                    var tdElementWidth = tdElement.offsetWidth;
+                    angular.element(thElements[i]).css({'width': tdElementWidth + 'px'});
+                }
+            }
+
+            function bindFixedToHeader() {
+                var thead = element.find("thead"),
+                    tbody = element.find("tbody"),
+                    tbodyLeftPos = tbody[0].getBoundingClientRect().left;
+                thead.addClass('fixed-header');
+                if (attrs.offsetFromElement) {
+                    var topElement = document.querySelector(attrs.offsetFromElement);
+                    var offset = topElement.getBoundingClientRect().top + topElement.offsetHeight;
+                    thead.css({"top": offset});
+                }
+                thead.css({"left": tbodyLeftPos});
+                tbody.addClass("tbody-offset");
+            }
+
+            function unBindFixedToHeader() {
+                var thead = element.find("thead"),
+                    tbody = element.find("tbody");
+                thead.removeClass('fixed-header');
+                thead.css({"left": ""});
+                thead.css({"top": ""});
+                tbody.removeClass("tbody-offset");
+            }
+
+            function onScroll() {
+                var offset = attrs.offsetFromElement ?
+                        elementOffsetFrom.getBoundingClientRect().top + elementOffsetFrom.offsetHeight :
+                        $window.pageYOffset,
+                    tableOffsetTop = attrs.offsetFromElement ?
+                        element[0].getBoundingClientRect().top :
+                        element[0].getBoundingClientRect().top + offset,
+                    tableOffsetBottom = tableOffsetTop + element[0].offsetHeight - element.find("thead")[0].offsetHeight;
+
+                if (offset < tableOffsetTop || offset > tableOffsetBottom) {
+                    unBindFixedToHeader();
+                }
+                else if (offset >= tableOffsetTop && offset <= tableOffsetBottom) {
+                    bindFixedToHeader();
+                }
+                onResize();
+            }
+
+            scope.$on('gridReloaded', function () {
+                $timeout(function () {
+                    onResize();
+                    onScroll();
+                }, 0);
+            });
+            window.on('resize', onResize);
+            window.on('scroll', onScroll);
+        }
+    }
+
+})();
\ No newline at end of file

From 647e08141e17f237cddfe7bec6433aefdeed423d Mon Sep 17 00:00:00 2001
From: Andrey Chayko <chaiko.work@gmail.com>
Date: Mon, 10 Apr 2017 13:11:41 +0300
Subject: [PATCH 21/39] Added links to codepen, updated readme.md, added links
 to additional demos

---
 README.md                              | 3 ++-
 demo/bootstrap/index.html              | 3 +++
 demo/fixed-header/angular-md-grid.html | 4 ++--
 demo/fixed-header/bootstrap-grid.html  | 4 ++--
 demo/material/index.html               | 6 ++++++
 5 files changed, 15 insertions(+), 5 deletions(-)

diff --git a/README.md b/README.md
index a453e66..8dc4aab 100644
--- a/README.md
+++ b/README.md
@@ -15,7 +15,8 @@ Demo Angular UI Router: http://angular-data-grid.github.io/demo/bootstrap/ui-rou
  - Does not have any hard-coded template so you can choose any mark-up you need, from basic `<table>` layout to any `<div>` structure.
  - Easily switch between the most popular Bootstrap and Google Material theming, or apply your own CSS theme just by changing several CSS classes.
  - Built-in sync with browser address bar (URL), so you can copy-n-paste sorting/filtering/pagination results URL and open it in other browser / send to anyone - even if pagination / filtering are done on a client-side. [See details](#url-synchronization)
- - Support of [Angular UI Router](https://github.com/angular-ui/ui-router) navigation. 
+ - Support of [Angular UI Router](https://github.com/angular-ui/ui-router) navigation.
+ - Optional support of fixed header table: [bootstrap Demo](https://github.com/angular-data-grid/demo/fixed-header/bootstrap-grid.html) [Material Design Demo](https://github.com/angular-data-grid/demo/fixed-header/angular-md-grid.html)
  - Unlike most part of other Angular DataGrids, we intentionally use non-isolated scope of the directive to maximize flexibility, so it can be easily synchronized with any data changes inside your controller. 
  NOTE! With great power comes great responsibility, so use non-isolated API wisely.
 
diff --git a/demo/bootstrap/index.html b/demo/bootstrap/index.html
index b0919de..4bbbed7 100644
--- a/demo/bootstrap/index.html
+++ b/demo/bootstrap/index.html
@@ -48,6 +48,9 @@ <h4>Additional Demos</h4>
         <li>
             <a href="ui-router.html" target="_blank">UI Router plus server pagination</a>
         </li>
+        <li>
+            <a href="../fixed-header/bootstrap-grid.html">Fixed header table</a>
+        </li>
     </ul>
     <hr>
     <div class="row">
diff --git a/demo/fixed-header/angular-md-grid.html b/demo/fixed-header/angular-md-grid.html
index 134befc..6d47d72 100644
--- a/demo/fixed-header/angular-md-grid.html
+++ b/demo/fixed-header/angular-md-grid.html
@@ -245,9 +245,9 @@ <h4>Using Stand-alone Directive</h4>
         <hr>
         <md-button class="md-raised md-primary" ng-click="showCode = !showCode">CodePen</md-button>
         <div ng-show="showCode" class="codepen-wrap">
-            <p data-height="768" data-theme-id="21603" data-slug-hash="eJWWpM" data-default-tab="html"
+            <p data-height="768" data-theme-id="21603" data-slug-hash="bqXarG" data-default-tab="html"
                data-user="AngularDataGrid" class='codepen'>See the Pen <a
-                    href='http://codepen.io/AngularDataGrid/pen/eJWWpM'>eJWWpM</a> by AngularDataGrid (<a
+                    href='http://codepen.io/AngularDataGrid/pen/bqXarG'>eJWWpM</a> by AngularDataGrid (<a
                     href='http://codepen.io/AngularDataGrid'>@AngularDataGrid</a>) on <a href='http://codepen.io'>CodePen</a>.
             </p>
             <script async src="//assets.codepen.io/assets/embed/ei.js"></script>
diff --git a/demo/fixed-header/bootstrap-grid.html b/demo/fixed-header/bootstrap-grid.html
index bf2d003..6a13d59 100644
--- a/demo/fixed-header/bootstrap-grid.html
+++ b/demo/fixed-header/bootstrap-grid.html
@@ -285,8 +285,8 @@ <h4>Additional Demos</h4>
     <div>
         <button class="btn btn-info margin-bottom-basic" ng-click="showCode = !showCode">CodePen</button>
         <div ng-show="showCode">
-            <p data-height="768" data-theme-id="21603" data-slug-hash="xZddZm" data-default-tab="html" data-user="AngularDataGrid" class='codepen'>See the Pen <a
-                    href='http://codepen.io/AngularDataGrid/pen/xZddZm/'>xZddZm</a> by AngularDataGrid (<a href='http://codepen.io/AngularDataGrid'>@AngularDataGrid</a>) on <a href='http://codepen.io'>CodePen</a>.</p>
+            <p data-height="768" data-theme-id="21603" data-slug-hash="qrGXRL" data-default-tab="html" data-user="AngularDataGrid" class='codepen'>See the Pen <a
+                    href='http://codepen.io/AngularDataGrid/pen/qrGXRL/'>xZddZm</a> by AngularDataGrid (<a href='http://codepen.io/AngularDataGrid'>@AngularDataGrid</a>) on <a href='http://codepen.io'>CodePen</a>.</p>
             <script async src="//assets.codepen.io/assets/embed/ei.js"></script>
         </div>
     </div>
diff --git a/demo/material/index.html b/demo/material/index.html
index 9702465..d14dafa 100644
--- a/demo/material/index.html
+++ b/demo/material/index.html
@@ -44,6 +44,12 @@ <h4>Angular Data Grid sample using Material Design styling</h4>
                     <a href="https://github.com/angular-data-grid/angular-data-grid.github.io"
                        target="_blank">Project GitHub</a></p>
             </div>
+            <h4>Additional Demos</h4>
+            <ul>
+                <li>
+                    <a href="../fixed-header/angular-md-grid.html">Fixed header table</a>
+                </li>
+            </ul>
             <hr>
             <div layout-gt-xs="row" layout-xs="column" layout-align="stretch center">
                 <div  layout="row" layout-align="center start">

From 9872f03409a7c5c60cbde9b19019fc52f3c31a7a Mon Sep 17 00:00:00 2001
From: Andrey Chayko <chaiko.work@gmail.com>
Date: Mon, 10 Apr 2017 13:16:56 +0300
Subject: [PATCH 22/39] Updated readme.md

---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 8dc4aab..1ea0f5b 100644
--- a/README.md
+++ b/README.md
@@ -16,7 +16,7 @@ Demo Angular UI Router: http://angular-data-grid.github.io/demo/bootstrap/ui-rou
  - Easily switch between the most popular Bootstrap and Google Material theming, or apply your own CSS theme just by changing several CSS classes.
  - Built-in sync with browser address bar (URL), so you can copy-n-paste sorting/filtering/pagination results URL and open it in other browser / send to anyone - even if pagination / filtering are done on a client-side. [See details](#url-synchronization)
  - Support of [Angular UI Router](https://github.com/angular-ui/ui-router) navigation.
- - Optional support of fixed header table: [bootstrap Demo](https://github.com/angular-data-grid/demo/fixed-header/bootstrap-grid.html) [Material Design Demo](https://github.com/angular-data-grid/demo/fixed-header/angular-md-grid.html)
+ - Optional support of fixed header table: [Bootstrap Demo](http://angular-data-grid.github.io/demo/fixed-header/bootstrap-grid.html) [Material Design Demo](http://angular-data-grid.github.io/demo/fixed-header/angular-md-grid.html)
  - Unlike most part of other Angular DataGrids, we intentionally use non-isolated scope of the directive to maximize flexibility, so it can be easily synchronized with any data changes inside your controller. 
  NOTE! With great power comes great responsibility, so use non-isolated API wisely.
 

From d8492cd0ecb10a448212cfa78bca9e23f4d8b35e Mon Sep 17 00:00:00 2001
From: Andrey Chayko <chaiko.work@gmail.com>
Date: Mon, 10 Apr 2017 14:37:34 +0300
Subject: [PATCH 23/39] Modified fixed-header sample links structure

---
 demo/bootstrap/index.html              |  2 +-
 demo/fixed-header/angular-md-grid.html | 21 +++------------
 demo/fixed-header/bootstrap-grid.html  | 36 ++++----------------------
 demo/material/index.html               |  2 +-
 4 files changed, 10 insertions(+), 51 deletions(-)

diff --git a/demo/bootstrap/index.html b/demo/bootstrap/index.html
index 4bbbed7..061eb5b 100644
--- a/demo/bootstrap/index.html
+++ b/demo/bootstrap/index.html
@@ -49,7 +49,7 @@ <h4>Additional Demos</h4>
             <a href="ui-router.html" target="_blank">UI Router plus server pagination</a>
         </li>
         <li>
-            <a href="../fixed-header/bootstrap-grid.html">Fixed header table</a>
+            <a href="../fixed-header/bootstrap-grid.html" target="_blank">Fixed header table</a>
         </li>
     </ul>
     <hr>
diff --git a/demo/fixed-header/angular-md-grid.html b/demo/fixed-header/angular-md-grid.html
index 6d47d72..d828b6c 100644
--- a/demo/fixed-header/angular-md-grid.html
+++ b/demo/fixed-header/angular-md-grid.html
@@ -17,30 +17,15 @@
         <div class="md-toolbar-tools" flex-gt-md="60" flex-md="80" flex-sm="100">
             <span>Angular Data Grid &mdash; Material Design</span>
             <span flex></span>
-            <md-menu md-position-mode="target-right target">
-                <md-button ng-click="$mdOpenMenu($event)">
-                    <span layout="row" layout-align="center center">
-                    Change theme
-                    <i class="material-icons">arrow_drop_down</i>
-                    </span>
-                </md-button>
-                <md-menu-content>
-                    <md-menu-item>
-                        <a href="../bootstrap/">Bootstrap Design</a>
-                    </md-menu-item>
-                    <md-menu-item>
-                        <a href="index.html"><strong>Material Design</strong></a>
-                    </md-menu-item>
-                </md-menu-content>
-            </md-menu>
+            <ul><a href="../material/">Back to main demo</a></ul>
         </div>
     </md-toolbar>
 
     <div flex-gt-md="60" flex-md="80" flex-xs="100">
         <div>
-            <h4>Angular Data Grid sample using Material Design styling</h4>
+            <h4>Fix Header Table</h4>
 
-            <p>Features enabled: sorting, filtering, sync with browser URLs, pagination and item-per-page functionality.
+            <p>Features enabled: sorting, filtering, sync with browser URLs, pagination, item-per-page and fixed-header functionality.
                 Out-of-box <a href="https://material.angularjs.org/" target="_blank">Angular Material</a> layout and
                 input controls used,
                 along with <a href="http://www.getmdl.io/" target="_blank">Material Design Light</a> default CSS for
diff --git a/demo/fixed-header/bootstrap-grid.html b/demo/fixed-header/bootstrap-grid.html
index 6a13d59..d56420c 100644
--- a/demo/fixed-header/bootstrap-grid.html
+++ b/demo/fixed-header/bootstrap-grid.html
@@ -14,25 +14,15 @@
 <nav class="navbar navbar-inverse fixed-nav">
     <div class="container">
         <a href="#" class="navbar-brand">Angular Data Grid - Bootstrap Design</a>
-        <div class="navbar-form navbar-right" uib-dropdown>
-            <button id="single-button" type="button" class="btn btn-info" uib-dropdown-toggle>
-                Change Theme <span class="caret"></span>
-            </button>
-            <ul class="dropdown-menu" aria-labelledby="simple-dropdown">
-                <li>
-                    <a href="index.html"><strong>Bootstrap Design</strong></a>
-                </li>
-                <li>
-                    <a href="../material/">Material Design</a>
-                </li>
-            </ul>
-        </div>
+        <ul class="nav navbar-nav navbar-right">
+            <li><a href="../bootstrap/">Back to main demo</a></li>
+        </ul>
     </div>
 </nav>
 <div class="container">
     <div class="margin-bottom-basic padding-top-50">
-        <h2>Angular Data Grid sample using out-of-box Bootstrap styling</h2>
-        Features enabled: sorting, filtering (using both in-grid and external controls), sync with browser URLs, pagination and items-per-page functionality.
+        <h2>Fix Header Table</h2>
+        Features enabled: sorting, filtering (using both in-grid and external controls), sync with browser URLs, pagination, items-per-page and fixed-header functionality.
         Angular UI Datepicker used for date controls, although you can use any other framework, plugin or styling.
         <a href="https://github.com/angular-data-grid/angular-data-grid.github.io" target="_blank">Project GitHub</a>
     </div>
@@ -98,22 +88,6 @@ <h4>Using Stand-alone Directive</h4>
         </p>
     </div>
     <hr>
-    <h4>Additional Demos</h4>
-    <ul>
-        <li>
-            <a href="../100k/" class="margin-bottom-basic" target="_blank">100k rows</a>
-        </li>
-        <li>
-            <a href="multiple.html" target="_blank">Multiple grids on page</a>
-        </li>
-        <li>
-            <a href="server-pagination.html" target="_blank">Server pagination</a>
-        </li>
-        <li>
-            <a href="ui-router.html" target="_blank">UI Router plus server pagination</a>
-        </li>
-    </ul>
-    <hr>
     <div class="row">
         <div>
             <div class="col-md-4">
diff --git a/demo/material/index.html b/demo/material/index.html
index d14dafa..a9846db 100644
--- a/demo/material/index.html
+++ b/demo/material/index.html
@@ -47,7 +47,7 @@ <h4>Angular Data Grid sample using Material Design styling</h4>
             <h4>Additional Demos</h4>
             <ul>
                 <li>
-                    <a href="../fixed-header/angular-md-grid.html">Fixed header table</a>
+                    <a href="../fixed-header/angular-md-grid.html" target="_blank">Fixed header table</a>
                 </li>
             </ul>
             <hr>

From 616677792f6a671f9ec4e6c4e51d6eee72f4271c Mon Sep 17 00:00:00 2001
From: Igor Korshuk <Igor.Korshuk@landsend.com>
Date: Tue, 11 Apr 2017 16:43:38 +0300
Subject: [PATCH 24/39] #34 reloading the grid after changes in the grid-data

---
 dist/dataGrid.js     | 2 +-
 dist/dataGrid.min.js | 2 +-
 src/js/dataGrid.js   | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/dist/dataGrid.js b/dist/dataGrid.js
index 7ed9847..14ee687 100644
--- a/dist/dataGrid.js
+++ b/dist/dataGrid.js
@@ -37,7 +37,7 @@
             $scope.customFilters = $scope._gridOptions.customFilters ? angular.copy($scope._gridOptions.customFilters) : {};
             $scope.urlSync = $scope._gridOptions.urlSync;
 
-            $scope.$watch('_gridOptions.data', function (newValue) {
+            $scope.$watchCollection('_gridOptions.data', function (newValue) {
                 if (newValue && newValue.length > -1) {
                     $scope.sortCache = {};
                     $scope.filtered = $scope._gridOptions.data.slice();
diff --git a/dist/dataGrid.min.js b/dist/dataGrid.min.js
index 2789310..0aa1794 100644
--- a/dist/dataGrid.min.js
+++ b/dist/dataGrid.min.js
@@ -1 +1 @@
-!function(){"use strict";function t(t,e){var i=[];if(t)return t.forEach(function(t){~i.indexOf(t[e])||i.push(t[e])}),i.map(function(t){return{text:t,value:t}})}angular.module("dataGrid",[]).filter("startFrom",function(){return function(t,e){return t?(e=+e,t.slice(e)):[]}}).controller("gridController",["$scope","$rootScope","$element","$filter","$location","filtersFactory",function(e,i,r,n,a,o){function s(){(e.urlSync||e.serverPagination)&&(e.serverPagination&&(clearTimeout(e.getDataTimeout),e.getDataTimeout=setTimeout(p,e.getDataDelay)),e.filtered&&l())}function c(t){var i,r=!1;i="page="+e.paginationOptions.currentPage,e.paginationOptions.itemsPerPage!==e.defaultsPaginationOptions.itemsPerPage&&(i+="&itemsPerPage="+e.paginationOptions.itemsPerPage),e.sortOptions.predicate&&(i+="&sort="+encodeURIComponent(e.sortOptions.predicate+"-"+e.sortOptions.direction)),e.filters.forEach(function(t){var n=t.model,a=t.isInScope?e.$eval(n):e.$parent.$eval(n);if(t.disableUrl)return void(r=!0);if(a){var o;if(a instanceof Date){if(isNaN(a.getTime()))return;o=a.getFullYear()+"-",o+=a.getMonth()<9?"0"+(a.getMonth()+1)+"-":a.getMonth()+1+"-",o+=a.getDate()<10?"0"+a.getDate():a.getDate(),a=o}i+="&"+encodeURIComponent(n)+"="+encodeURIComponent(a)}}),r&&d(),a.search(i),t&&e.$apply()}function l(){var t=a.search(),i={};if(Object.keys(t).forEach(function(e){"page"!==e&&"sort"!==e&&"itemsPerPage"!==e&&(i[e]=t[e])}),e.filters.forEach(function(t){var r=t.model,n=i[r];if(!t.disableUrl){if(~t.filterType.toLowerCase().indexOf("date"))return e.$parent.__evaltmp=n?new Date(n):null,void e.$parent.$eval(r+"=__evaltmp");"select"!==t.filterType||n||(n=""),n&&(t.isInScope?(e.__evaltmp=n,e.$eval(r+"=__evaltmp")):(e.$parent.__evaltmp=n,e.$parent.$eval(r+"=__evaltmp")))}}),e.paginationOptions.itemsPerPage=e.defaultsPaginationOptions.itemsPerPage,e.paginationOptions.currentPage=e.defaultsPaginationOptions.currentPage,t.itemsPerPage&&(e.paginationOptions.itemsPerPage=t.itemsPerPage),t.page&&(!e.serverPagination&&(t.page-1)*e.paginationOptions.itemsPerPage>e.filtered.length?e.paginationOptions.currentPage=1:e.paginationOptions.currentPage=t.page),t.sort){var r=t.sort.split("-");e.sortOptions.predicate=decodeURIComponent(r[0]),e.sortOptions.direction=decodeURIComponent(r[1])}e.serverPagination||d()}function p(){var t="",i=a.search();Object.keys(i).forEach(function(e){t+=e+"="+i[e]+"&"}),t=t.slice(0,-1),!t&&e.sortOptions.predicate?e.sort(e.sortOptions.predicate,!0):e._gridOptions.getData("?"+t,function(t,i){e.filtered=t,e.paginationOptions.totalItems=i})}function d(){var t=Date.now(),i=!1;e._time={},e.sortOptions.predicate&&e.sortCache&&e.sortCache.predicate===e.sortOptions.predicate&&e.sortCache.direction===e.sortOptions.direction?(e.filtered=e.sortCache.data.slice(),i=!0):e.filtered=e._gridOptions.data.slice(),e._time.copy=Date.now()-t;var r=Date.now();g(),e._time.filters=Date.now()-r;var a=Date.now();e.sortOptions.predicate&&!i&&(e.filtered=n("orderBy")(e.filtered,e.sortOptions.predicate,"desc"===e.sortOptions.direction),e.sortCache={data:e.filtered.slice(),predicate:e.sortOptions.predicate,direction:e.sortOptions.direction}),e._time.sort=Date.now()-a,e._time.all=Date.now()-t,e.paginationOptions.totalItems=e.filtered.length}function g(){e.filters.forEach(function(t){var i=t.filterBy,r=t.model,n=t.isInScope?e.$eval(r):e.$parent.$eval(r),a=t.filterType;if(e.customFilters[r])e.filtered=e.customFilters[r](e.filtered,n,i);else if(n&&a){var s=o.getFilterByType(a);s&&(e.filtered=s(e.filtered,n,i))}})}e._gridOptions=e.$eval(r.attr("grid-options")),e._gridActions=e.$eval(r.attr("grid-actions")),e.serverPagination="true"===r.attr("server-pagination"),e.getDataDelay=r.attr("get-delay")||350,e._gridActions||(e.$parent.$eval(r.attr("grid-actions")+"= {}"),e._gridActions=e.$parent.$eval(r.attr("grid-actions"))),e._gridOptions.grid=e,e.filtered=e._gridOptions.data.slice(),e.paginationOptions=e._gridOptions.pagination?angular.copy(e._gridOptions.pagination):{},e.defaultsPaginationOptions={itemsPerPage:e.paginationOptions.itemsPerPage||"10",currentPage:e.paginationOptions.currentPage||1},e.paginationOptions=angular.copy(e.defaultsPaginationOptions),e.sortOptions=e._gridOptions.sort?angular.copy(e._gridOptions.sort):{},e.customFilters=e._gridOptions.customFilters?angular.copy(e._gridOptions.customFilters):{},e.urlSync=e._gridOptions.urlSync,e.$watch("_gridOptions.data",function(i){i&&i.length>-1&&(e.sortCache={},e.filtered=e._gridOptions.data.slice(),e.filters.forEach(function(i){"select"===i.filterType&&(e[i.model+"Options"]=t(e.filtered,i.filterBy))}),e.urlSync?l():d())}),e.sort=function(t,i){if(!i){var r=e.sortOptions.predicate===t&&"desc"===e.sortOptions.direction?"asc":"desc";e.sortOptions.direction=r,e.sortOptions.predicate=t}e.paginationOptions.currentPage=1,e.reloadGrid(i)},e.filter=function(){e.paginationOptions.currentPage=1,e.reloadGrid()},e.$on("$locationChangeSuccess",function(){s()}),e.$on("$stateChangeSuccess",function(t,e){s()}),e.reloadGrid=function(t){e.urlSync||e.serverPagination?c(t):d(),i.$broadcast("gridReloaded")},e._gridActions.refresh=e.reloadGrid,e._gridActions.filter=e.filter,e._gridActions.sort=e.sort}]).directive("gridItem",["$compile",function(t){return{restrict:"EA",terminal:!0,scope:!1,link:function(e,i,r,n,a){e.serverPagination?i.attr("ng-repeat","item in filtered"):i.attr("ng-repeat","item in filtered | startFrom:(paginationOptions.currentPage-1)*paginationOptions.itemsPerPage | limitTo:paginationOptions.itemsPerPage track by $index"),i.removeAttr("grid-item");var o=i[0].outerHTML;i.replaceWith(t(o)(e))}}}]).directive("gridData",["$compile","$animate",function(e){return{restrict:"EA",scope:!0,controller:"gridController",link:function(i,r,n){var a=[],o=r.parent(),s=n.id,c="true"===n.serverPagination;i.serverPagination=c,angular.forEach(angular.element(o[0].querySelectorAll("[sortable]")),function(t){var r=angular.element(t),n=r.attr("sortable");r.attr("ng-class","{'sort-ascent' : sortOptions.predicate ==='"+n+"' && sortOptions.direction === 'asc', 'sort-descent' : sortOptions.predicate === '"+n+"' && sortOptions.direction === 'desc'}"),r.attr("ng-click","sort('"+n+"')"),e(r)(i)}),angular.forEach(document.querySelectorAll("[filter-by]"),function(e){var n=angular.element(e),o=n.attr("filter-by"),c=document.querySelectorAll("[grid-data]")[0],l=c.querySelectorAll('[filter-by="'+o+'"]').length>0,p=n.attr("filter-type")||"",d=n.attr("ng-model"),g=n.attr("disable-url");s&&n.attr("grid-id")&&s!=n.attr("grid-id")||("select"!==p||(i[d+"Options"]=t(i.$eval(r.attr("grid-options")+".data"),o)),!~p.indexOf("date")||n.attr("ng-focus")||n.attr("ng-blur")||(n.attr("ng-focus","filter('{"+d+" : this."+d+"}')"),n.attr("ng-blur","filter('{"+d+" : this."+d+"}')")),d||(d=o,n.attr("ng-model",o),n.attr("ng-change","filter()")),a.push({model:d,isInScope:l,filterBy:o,filterType:p,disableUrl:g}))}),i.filters=a}}}]).factory("filtersFactory",function(){function t(t,e,i){return t.filter(function(t){return!e||!t[i]||t[i]===e})}function e(t,e,i){return t.filter(function(t){return e&&t[i]?~(t[i]+"").toLowerCase().indexOf((e+"").toLowerCase()):!!t[i]})}function i(t,e,i){return e=new Date(e).getTime(),t.filter(function(t){return!e||!t[i]||t[i]<=e+86399999})}function r(t,e,i){return e=new Date(e).getTime(),t.filter(function(t){return!e||!t[i]||t[i]>=e})}return{getFilterByType:function(n){switch(n){case"select":return t;case"text":return e;case"dateTo":return i;case"dateFrom":return r;default:return null}}}})}();
\ No newline at end of file
+!function(){"use strict";function t(t,e){var i=[];if(t)return t.forEach(function(t){~i.indexOf(t[e])||i.push(t[e])}),i.map(function(t){return{text:t,value:t}})}angular.module("dataGrid",[]).filter("startFrom",function(){return function(t,e){return t?(e=+e,t.slice(e)):[]}}).controller("gridController",["$scope","$rootScope","$element","$filter","$location","filtersFactory",function(e,i,r,n,a,o){function s(){(e.urlSync||e.serverPagination)&&(e.serverPagination&&(clearTimeout(e.getDataTimeout),e.getDataTimeout=setTimeout(p,e.getDataDelay)),e.filtered&&l())}function c(t){var i,r=!1;i="page="+e.paginationOptions.currentPage,e.paginationOptions.itemsPerPage!==e.defaultsPaginationOptions.itemsPerPage&&(i+="&itemsPerPage="+e.paginationOptions.itemsPerPage),e.sortOptions.predicate&&(i+="&sort="+encodeURIComponent(e.sortOptions.predicate+"-"+e.sortOptions.direction)),e.filters.forEach(function(t){var n=t.model,a=t.isInScope?e.$eval(n):e.$parent.$eval(n);if(t.disableUrl)return void(r=!0);if(a){var o;if(a instanceof Date){if(isNaN(a.getTime()))return;o=a.getFullYear()+"-",o+=a.getMonth()<9?"0"+(a.getMonth()+1)+"-":a.getMonth()+1+"-",o+=a.getDate()<10?"0"+a.getDate():a.getDate(),a=o}i+="&"+encodeURIComponent(n)+"="+encodeURIComponent(a)}}),r&&d(),a.search(i),t&&e.$apply()}function l(){var t=a.search(),i={};if(Object.keys(t).forEach(function(e){"page"!==e&&"sort"!==e&&"itemsPerPage"!==e&&(i[e]=t[e])}),e.filters.forEach(function(t){var r=t.model,n=i[r];if(!t.disableUrl){if(~t.filterType.toLowerCase().indexOf("date"))return e.$parent.__evaltmp=n?new Date(n):null,void e.$parent.$eval(r+"=__evaltmp");"select"!==t.filterType||n||(n=""),n&&(t.isInScope?(e.__evaltmp=n,e.$eval(r+"=__evaltmp")):(e.$parent.__evaltmp=n,e.$parent.$eval(r+"=__evaltmp")))}}),e.paginationOptions.itemsPerPage=e.defaultsPaginationOptions.itemsPerPage,e.paginationOptions.currentPage=e.defaultsPaginationOptions.currentPage,t.itemsPerPage&&(e.paginationOptions.itemsPerPage=t.itemsPerPage),t.page&&(!e.serverPagination&&(t.page-1)*e.paginationOptions.itemsPerPage>e.filtered.length?e.paginationOptions.currentPage=1:e.paginationOptions.currentPage=t.page),t.sort){var r=t.sort.split("-");e.sortOptions.predicate=decodeURIComponent(r[0]),e.sortOptions.direction=decodeURIComponent(r[1])}e.serverPagination||d()}function p(){var t="",i=a.search();Object.keys(i).forEach(function(e){t+=e+"="+i[e]+"&"}),t=t.slice(0,-1),!t&&e.sortOptions.predicate?e.sort(e.sortOptions.predicate,!0):e._gridOptions.getData("?"+t,function(t,i){e.filtered=t,e.paginationOptions.totalItems=i})}function d(){var t=Date.now(),i=!1;e._time={},e.sortOptions.predicate&&e.sortCache&&e.sortCache.predicate===e.sortOptions.predicate&&e.sortCache.direction===e.sortOptions.direction?(e.filtered=e.sortCache.data.slice(),i=!0):e.filtered=e._gridOptions.data.slice(),e._time.copy=Date.now()-t;var r=Date.now();g(),e._time.filters=Date.now()-r;var a=Date.now();e.sortOptions.predicate&&!i&&(e.filtered=n("orderBy")(e.filtered,e.sortOptions.predicate,"desc"===e.sortOptions.direction),e.sortCache={data:e.filtered.slice(),predicate:e.sortOptions.predicate,direction:e.sortOptions.direction}),e._time.sort=Date.now()-a,e._time.all=Date.now()-t,e.paginationOptions.totalItems=e.filtered.length}function g(){e.filters.forEach(function(t){var i=t.filterBy,r=t.model,n=t.isInScope?e.$eval(r):e.$parent.$eval(r),a=t.filterType;if(e.customFilters[r])e.filtered=e.customFilters[r](e.filtered,n,i);else if(n&&a){var s=o.getFilterByType(a);s&&(e.filtered=s(e.filtered,n,i))}})}e._gridOptions=e.$eval(r.attr("grid-options")),e._gridActions=e.$eval(r.attr("grid-actions")),e.serverPagination="true"===r.attr("server-pagination"),e.getDataDelay=r.attr("get-delay")||350,e._gridActions||(e.$parent.$eval(r.attr("grid-actions")+"= {}"),e._gridActions=e.$parent.$eval(r.attr("grid-actions"))),e._gridOptions.grid=e,e.filtered=e._gridOptions.data.slice(),e.paginationOptions=e._gridOptions.pagination?angular.copy(e._gridOptions.pagination):{},e.defaultsPaginationOptions={itemsPerPage:e.paginationOptions.itemsPerPage||"10",currentPage:e.paginationOptions.currentPage||1},e.paginationOptions=angular.copy(e.defaultsPaginationOptions),e.sortOptions=e._gridOptions.sort?angular.copy(e._gridOptions.sort):{},e.customFilters=e._gridOptions.customFilters?angular.copy(e._gridOptions.customFilters):{},e.urlSync=e._gridOptions.urlSync,e.$watchCollection("_gridOptions.data",function(i){i&&i.length>-1&&(e.sortCache={},e.filtered=e._gridOptions.data.slice(),e.filters.forEach(function(i){"select"===i.filterType&&(e[i.model+"Options"]=t(e.filtered,i.filterBy))}),e.urlSync?l():d())}),e.sort=function(t,i){if(!i){var r=e.sortOptions.predicate===t&&"desc"===e.sortOptions.direction?"asc":"desc";e.sortOptions.direction=r,e.sortOptions.predicate=t}e.paginationOptions.currentPage=1,e.reloadGrid(i)},e.filter=function(){e.paginationOptions.currentPage=1,e.reloadGrid()},e.$on("$locationChangeSuccess",function(){s()}),e.$on("$stateChangeSuccess",function(t,e){s()}),e.reloadGrid=function(t){e.urlSync||e.serverPagination?c(t):d(),i.$broadcast("gridReloaded")},e._gridActions.refresh=e.reloadGrid,e._gridActions.filter=e.filter,e._gridActions.sort=e.sort}]).directive("gridItem",["$compile",function(t){return{restrict:"EA",terminal:!0,scope:!1,link:function(e,i,r,n,a){e.serverPagination?i.attr("ng-repeat","item in filtered"):i.attr("ng-repeat","item in filtered | startFrom:(paginationOptions.currentPage-1)*paginationOptions.itemsPerPage | limitTo:paginationOptions.itemsPerPage track by $index"),i.removeAttr("grid-item");var o=i[0].outerHTML;i.replaceWith(t(o)(e))}}}]).directive("gridData",["$compile","$animate",function(e){return{restrict:"EA",scope:!0,controller:"gridController",link:function(i,r,n){var a=[],o=r.parent(),s=n.id,c="true"===n.serverPagination;i.serverPagination=c,angular.forEach(angular.element(o[0].querySelectorAll("[sortable]")),function(t){var r=angular.element(t),n=r.attr("sortable");r.attr("ng-class","{'sort-ascent' : sortOptions.predicate ==='"+n+"' && sortOptions.direction === 'asc', 'sort-descent' : sortOptions.predicate === '"+n+"' && sortOptions.direction === 'desc'}"),r.attr("ng-click","sort('"+n+"')"),e(r)(i)}),angular.forEach(document.querySelectorAll("[filter-by]"),function(e){var n=angular.element(e),o=n.attr("filter-by"),c=document.querySelectorAll("[grid-data]")[0],l=c.querySelectorAll('[filter-by="'+o+'"]').length>0,p=n.attr("filter-type")||"",d=n.attr("ng-model"),g=n.attr("disable-url");s&&n.attr("grid-id")&&s!=n.attr("grid-id")||("select"!==p||(i[d+"Options"]=t(i.$eval(r.attr("grid-options")+".data"),o)),!~p.indexOf("date")||n.attr("ng-focus")||n.attr("ng-blur")||(n.attr("ng-focus","filter('{"+d+" : this."+d+"}')"),n.attr("ng-blur","filter('{"+d+" : this."+d+"}')")),d||(d=o,n.attr("ng-model",o),n.attr("ng-change","filter()")),a.push({model:d,isInScope:l,filterBy:o,filterType:p,disableUrl:g}))}),i.filters=a}}}]).factory("filtersFactory",function(){function t(t,e,i){return t.filter(function(t){return!e||!t[i]||t[i]===e})}function e(t,e,i){return t.filter(function(t){return e&&t[i]?~(t[i]+"").toLowerCase().indexOf((e+"").toLowerCase()):!!t[i]})}function i(t,e,i){return e=new Date(e).getTime(),t.filter(function(t){return!e||!t[i]||t[i]<=e+86399999})}function r(t,e,i){return e=new Date(e).getTime(),t.filter(function(t){return!e||!t[i]||t[i]>=e})}return{getFilterByType:function(n){switch(n){case"select":return t;case"text":return e;case"dateTo":return i;case"dateFrom":return r;default:return null}}}})}();
\ No newline at end of file
diff --git a/src/js/dataGrid.js b/src/js/dataGrid.js
index 7ed9847..14ee687 100644
--- a/src/js/dataGrid.js
+++ b/src/js/dataGrid.js
@@ -37,7 +37,7 @@
             $scope.customFilters = $scope._gridOptions.customFilters ? angular.copy($scope._gridOptions.customFilters) : {};
             $scope.urlSync = $scope._gridOptions.urlSync;
 
-            $scope.$watch('_gridOptions.data', function (newValue) {
+            $scope.$watchCollection('_gridOptions.data', function (newValue) {
                 if (newValue && newValue.length > -1) {
                     $scope.sortCache = {};
                     $scope.filtered = $scope._gridOptions.data.slice();

From b69697246e13f379186e8ac806dc0ec3791c01d3 Mon Sep 17 00:00:00 2001
From: AlexZ <alexanderzhuk@coherentsolutions.com>
Date: Tue, 11 Apr 2017 17:22:52 +0300
Subject: [PATCH 25/39] Update README.md

---
 README.md | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/README.md b/README.md
index 1ea0f5b..b20ed11 100644
--- a/README.md
+++ b/README.md
@@ -248,4 +248,6 @@ Each filter has optional parameter `disable-url` (boolean, default is 'false').
 If you need to use 2 or more grids on page, please add `id` to grids, and then use `grid-id` attribute on filters to specify their corresponding grid. [Example](http://angular-data-grid.github.io/demo/bootstrap/multiple.html)
 
 ### Next / Future
+ - Migrate to Heroku
+ - Cover with unit / e2e tests
  - Port to Angular2?

From 62e58195707e838920c9140970ef56b482adf67d Mon Sep 17 00:00:00 2001
From: Andrey Chayko <chaiko.work@gmail.com>
Date: Wed, 12 Apr 2017 11:47:54 +0300
Subject: [PATCH 26/39] Changed pagination default value for items per page to
 75 for both fixed header samples.

---
 demo/fixed-header/angular-md-grid.html          | 4 ++--
 demo/fixed-header/bootstrap-grid.html           | 4 ++--
 demo/fixed-header/js/bootstrap/demoApp.js       | 6 +++++-
 demo/fixed-header/js/material-design/demoApp.js | 6 +++++-
 4 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/demo/fixed-header/angular-md-grid.html b/demo/fixed-header/angular-md-grid.html
index d828b6c..adac9a9 100644
--- a/demo/fixed-header/angular-md-grid.html
+++ b/demo/fixed-header/angular-md-grid.html
@@ -156,7 +156,7 @@ <h4>Using Stand-alone Directive</h4>
                                          ng-change="reloadGrid()"
                                          items-per-page="paginationOptions.itemsPerPage"></grid-pagination>
                         <md-input-container flex-offset-gt-xs="5" class="items-per-page">
-                            <md-select ng-init="paginationOptions.itemsPerPage = '10'"
+                            <md-select
                                        ng-model="paginationOptions.itemsPerPage" ng-change="reloadGrid()">
                                 <md-option>10</md-option>
                                 <md-option>25</md-option>
@@ -217,7 +217,7 @@ <h4>Using Stand-alone Directive</h4>
                                  ng-change="reloadGrid()"
                                  items-per-page="paginationOptions.itemsPerPage"></grid-pagination>
                 <md-input-container flex-offset-gt-xs="5" class="items-per-page">
-                    <md-select ng-init="paginationOptions.itemsPerPage = '10'" ng-model="paginationOptions.itemsPerPage"
+                    <md-select ng-model="paginationOptions.itemsPerPage"
                                ng-change="reloadGrid()">
                         <md-option>10</md-option>
                         <md-option>25</md-option>
diff --git a/demo/fixed-header/bootstrap-grid.html b/demo/fixed-header/bootstrap-grid.html
index d56420c..f4b263f 100644
--- a/demo/fixed-header/bootstrap-grid.html
+++ b/demo/fixed-header/bootstrap-grid.html
@@ -186,7 +186,7 @@ <h4>Using Stand-alone Directive</h4>
                             </div>
                             <div class="form-group items-per-page">
                                 <label for="itemsOnPageSelect1">Items per page:</label>
-                                <select id="itemsOnPageSelect1" class="form-control input-sm" ng-init="paginationOptions.itemsPerPage = '10'" ng-model="paginationOptions.itemsPerPage" ng-change="reloadGrid()">
+                                <select id="itemsOnPageSelect1" class="form-control input-sm" ng-model="paginationOptions.itemsPerPage" ng-change="reloadGrid()">
                                     <option>10</option>
                                     <option>25</option>
                                     <option>50</option>
@@ -243,7 +243,7 @@ <h4>Using Stand-alone Directive</h4>
                     </div>
                     <div class="form-group items-per-page">
                         <label for="itemsOnPageSelect2">Items per page:</label>
-                        <select id="itemsOnPageSelect2" class="form-control input-sm" ng-init="paginationOptions.itemsPerPage = '10'"
+                        <select id="itemsOnPageSelect2" class="form-control input-sm"
                                 ng-model="paginationOptions.itemsPerPage" ng-change="reloadGrid()">
                             <option>10</option>
                             <option>25</option>
diff --git a/demo/fixed-header/js/bootstrap/demoApp.js b/demo/fixed-header/js/bootstrap/demoApp.js
index 042d439..8ec93b1 100644
--- a/demo/fixed-header/js/bootstrap/demoApp.js
+++ b/demo/fixed-header/js/bootstrap/demoApp.js
@@ -3,7 +3,11 @@ angular.module('myApp', ['ui.bootstrap', 'dataGrid', 'pagination', 'dataGridUtil
 
         $scope.gridOptions = {
             data: [],
-            urlSync: true
+            urlSync: true,
+            pagination: {
+                itemsPerPage: '75',
+                currentPage: 1
+            }
         };
 
         myAppFactory.getData().then(function (responseData) {
diff --git a/demo/fixed-header/js/material-design/demoApp.js b/demo/fixed-header/js/material-design/demoApp.js
index 2f108af..0532f3d 100644
--- a/demo/fixed-header/js/material-design/demoApp.js
+++ b/demo/fixed-header/js/material-design/demoApp.js
@@ -3,7 +3,11 @@ angular.module('myApp', ['dataGrid', 'pagination', 'ngMaterial', 'dataGridUtils.
 
         $scope.gridOptions = {
             data: [],
-            urlSync: true
+            urlSync: true,
+            pagination: {
+                itemsPerPage: '75',
+                currentPage: 1
+            }
         };
         myAppFactory.getData().then(function (responseData) {
             $scope.gridOptions.data = responseData.data;

From 79a222b5963724798926acec977f2477dbea8009 Mon Sep 17 00:00:00 2001
From: Andrey Chayko <chaiko.work@gmail.com>
Date: Wed, 12 Apr 2017 18:05:57 +0300
Subject: [PATCH 27/39] Changed titles for both fixed header samples. modified
 style of the code samples.

---
 demo/fixed-header/angular-md-grid.html | 14 ++++++--------
 demo/fixed-header/bootstrap-grid.html  | 14 ++++++--------
 2 files changed, 12 insertions(+), 16 deletions(-)

diff --git a/demo/fixed-header/angular-md-grid.html b/demo/fixed-header/angular-md-grid.html
index adac9a9..96aeb30 100644
--- a/demo/fixed-header/angular-md-grid.html
+++ b/demo/fixed-header/angular-md-grid.html
@@ -2,7 +2,7 @@
 <html>
 <head lang="en">
     <meta charset="UTF-8">
-    <title>Angular Data Grid - Material Design</title>
+    <title>Angular Data Grid - Fix Header Table</title>
     <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic">
     <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
@@ -15,7 +15,7 @@
 <div layout="column" layout-fill>
     <md-toolbar layout="row" layout-align="center">
         <div class="md-toolbar-tools" flex-gt-md="60" flex-md="80" flex-sm="100">
-            <span>Angular Data Grid &mdash; Material Design</span>
+            <span>Angular Data Grid &mdash; Fix Header Table</span>
             <span flex></span>
             <ul><a href="../material/">Back to main demo</a></ul>
         </div>
@@ -74,7 +74,7 @@ <h4>Using Stand-alone Directive</h4>
                         <code>&lt;link rel="stylesheet" href="bower_components/angular-data-grid/css/fixedHeader/fixed-header.css"&gt;</code>
                     </li>
                     <li>Inject dataGridUtils dependency in your module: <br>
-                        <code>angular.module('myApp', ['dataGrid', ‘dataGridUtils.fixedHeader’])</code>
+                        <code>angular.module('myApp', ['dataGrid', 'dataGridUtils.fixedHeader'])</code>
                     </li>
                     <li>Apply the directive <code>fixed-header</code> to the grid table: <br>
                         <code>&lt;table class="table" fixed-header&gt;</code>
@@ -87,11 +87,9 @@ <h4>Using Stand-alone Directive</h4>
                     to make the directive take
                     into consideration that header needs to be fixed with offset from above elements.</p>
                 <p>Example: <br>
-                    <code>&lt;table class="table" fixed-header offset-from-element
-                        =”.the-class-on-above-fixed-element”&gt;</code> <br>
-                    or <br>
-                    <code>&lt;table class="table" fixed-header offset-from-element
-                        =”=”#the-id-on-above-fixed-element”&gt;</code>
+                    <pre>&lt;table class="table" fixed-header offset-from-element=".the-class-on-above-fixed-element"&gt;</pre>
+                    or
+                    <pre>&lt;table class="table" fixed-header offset-from-element="#the-id-on-above-fixed-element”&gt;</pre>
                 </p>
                 <br>
                 <p>The directive subscribes on scroll event, but the event is not fired when directive is used inside <code>&lt;md-content&gt;</code>, so to make it work please use the directive outside the <code>&lt;md-content&gt;</code> container.
diff --git a/demo/fixed-header/bootstrap-grid.html b/demo/fixed-header/bootstrap-grid.html
index f4b263f..b1e7991 100644
--- a/demo/fixed-header/bootstrap-grid.html
+++ b/demo/fixed-header/bootstrap-grid.html
@@ -2,7 +2,7 @@
 <html>
 <head lang="en">
     <meta charset="UTF-8">
-    <title>Angular Data Grid - Bootstrap Design</title>
+    <title>Angular Data Grid - Fix Header Table</title>
     <link rel="icon" href="https://angularjs.org/favicon.ico" type="image/x-icon">
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
@@ -13,7 +13,7 @@
 <body ng-app="myApp" ng-controller="myAppController" ng-cloak>
 <nav class="navbar navbar-inverse fixed-nav">
     <div class="container">
-        <a href="#" class="navbar-brand">Angular Data Grid - Bootstrap Design</a>
+        <a href="#" class="navbar-brand">Angular Data Grid - Fix Header Table</a>
         <ul class="nav navbar-nav navbar-right">
             <li><a href="../bootstrap/">Back to main demo</a></li>
         </ul>
@@ -67,7 +67,7 @@ <h4>Using Stand-alone Directive</h4>
                 <code>&lt;link rel="stylesheet" href="bower_components/angular-data-grid/css/fixedHeader/fixed-header.css"&gt;</code>
             </li>
             <li>Inject dataGridUtils dependency in your module: <br>
-                <code>angular.module('myApp', ['dataGrid', ‘dataGridUtils.fixedHeader’])</code>
+                <code>angular.module('myApp', ['dataGrid', 'dataGridUtils.fixedHeader'])</code>
             </li>
             <li>Apply the directive <code>fixed-header</code> to the grid table: <br>
                 <code>&lt;table class="table" fixed-header&gt;</code>
@@ -80,11 +80,9 @@ <h4>Using Stand-alone Directive</h4>
            to make the directive take
            into consideration that header needs to be fixed with offset from above elements.</p>
         <p>Example: <br>
-            <code>&lt;table class="table" fixed-header offset-from-element
-                =”.the-class-on-above-fixed-element”&gt;</code> <br>
-            or <br>
-            <code>&lt;table class="table" fixed-header offset-from-element
-                =”=”#the-id-on-above-fixed-element”&gt;</code>
+            <pre>&lt;table class="table" fixed-header offset-from-element=".the-class-on-above-fixed-element"&gt;</pre>
+            or
+            <pre>&lt;table class="table" fixed-header offset-from-element="#the-id-on-above-fixed-element"&gt;</pre>
         </p>
     </div>
     <hr>

From 70e8cc737e070514e33edc37998de4e4d8f605de Mon Sep 17 00:00:00 2001
From: Andrey Chayko <chaiko.work@gmail.com>
Date: Tue, 15 Aug 2017 15:15:37 +0300
Subject: [PATCH 28/39] Updated bootstrap multiple grids sample - added new
 column to table with filtering logic

---
 demo/bootstrap/js/multipleApp.js |  2 ++
 demo/bootstrap/multiple.html     | 26 ++++++++++++++++++++++++++
 2 files changed, 28 insertions(+)

diff --git a/demo/bootstrap/js/multipleApp.js b/demo/bootstrap/js/multipleApp.js
index 61ee6a7..d2d76c7 100644
--- a/demo/bootstrap/js/multipleApp.js
+++ b/demo/bootstrap/js/multipleApp.js
@@ -1,5 +1,6 @@
 angular.module('myApp', ['ui.bootstrap', 'dataGrid', 'pagination'])
     .controller('myAppController', ['$scope', function ($scope) {
+        $scope.statuses = ['On Vacation','Terminated','Employed'];
 
         $scope.gridOptions1 = {
             data: generateJSON(100)
@@ -26,6 +27,7 @@ angular.module('myApp', ['ui.bootstrap', 'dataGrid', 'pagination'])
                 item.name = names[Math.round(Math.random() * (names.length - 1))];
                 item.phone = '+375-29-' + Math.round(Math.random() * 1000000);
                 item.date = Math.round(Math.random() * 1000000000000);
+                item.status = $scope.statuses[Math.round(Math.random() * ($scope.statuses.length - 1))];
                 jsonObj.push(item);
 
             }
diff --git a/demo/bootstrap/multiple.html b/demo/bootstrap/multiple.html
index 8ff7365..0cd7689 100644
--- a/demo/bootstrap/multiple.html
+++ b/demo/bootstrap/multiple.html
@@ -86,6 +86,18 @@ <h2>First Grid</h2>
                         <th sortable="date" class="sortable">
                             Date Of Birth
                         </th>
+                        <th class="st-sort-disable th-dropdown">
+                            <select class="form-control width-15"
+                                    filter-by="status"
+                                    filter-type="select"
+                                    ng-model="status"
+                                    ng-change="filter()">
+                                <option value="">All Statuses</option>
+                                <option ng-repeat="option in statuses track by $index"
+                                        value="{{option}}">{{option}}
+                                </option>
+                            </select>
+                        </th>
                     </tr>
                     </thead>
                     <tbody>
@@ -94,6 +106,7 @@ <h2>First Grid</h2>
                         <td ng-bind="item.name"></td>
                         <td ng-bind="item.phone"></td>
                         <td width="30%" ng-bind="item.date | date:'MM/dd/yyyy'"></td>
+                        <td ng-bind="item.status"></td>
                     </tr>
                     </tbody>
                 </table>
@@ -182,6 +195,18 @@ <h2>Second Grid</h2>
                         <th sortable="date" class="sortable">
                             Date Of Birth
                         </th>
+                        <th class="st-sort-disable th-dropdown">
+                            <select class="form-control width-15"
+                                    filter-by="status"
+                                    filter-type="select"
+                                    ng-model="status"
+                                    ng-change="filter()">
+                                <option value="">All Statuses</option>
+                                <option ng-repeat="option in statuses track by $index"
+                                        value="{{option}}">{{option}}
+                                </option>
+                            </select>
+                        </th>
                     </tr>
                     </thead>
                     <tbody>
@@ -190,6 +215,7 @@ <h2>Second Grid</h2>
                         <td ng-bind="item.name"></td>
                         <td ng-bind="item.phone"></td>
                         <td width="30%" ng-bind="item.date | date:'MM/dd/yyyy'"></td>
+                        <td ng-bind="item.status"></td>
                     </tr>
                     </tbody>
                 </table>

From 76b4865eb21e4e1063a4f170defd16cbec12209b Mon Sep 17 00:00:00 2001
From: Rowinson Gallego <rwn.gallego@gmail.com>
Date: Tue, 15 Aug 2017 09:54:50 -0500
Subject: [PATCH 29/39] Support for ES6 imports was added (#45)

---
 index.js     | 7 +++++++
 package.json | 2 +-
 2 files changed, 8 insertions(+), 1 deletion(-)
 create mode 100644 index.js

diff --git a/index.js b/index.js
new file mode 100644
index 0000000..6b85ad2
--- /dev/null
+++ b/index.js
@@ -0,0 +1,7 @@
+require('./dist/dataGrid');
+require('./dist/pagination');
+
+module.exports = {
+    dataGrid: 'dataGrid',
+    pagination: 'pagination',
+};
diff --git a/package.json b/package.json
index 260e070..9aaf0b6 100644
--- a/package.json
+++ b/package.json
@@ -15,7 +15,7 @@
     "gulp-uglify": "^1.4.2"
   },
   "description": "Light, flexible and performant Data Grid for AngularJS apps, with built-in sorting, pagination and filtering options, unified API for client-side and server-side data fetching, \r seamless synchronization with browser address bar and total freedom in mark-up and styling suitable for your application. Angular 1.3 - 1.6 compliant.",
-  "main": "index.html",
+  "main": "index.js",
   "devDependencies": {},
   "repository": {
     "type": "git",

From 52db8e025d4648a21c9a083242e1b914c7e0f762 Mon Sep 17 00:00:00 2001
From: Andrey Chayko <chaiko.work@gmail.com>
Date: Wed, 16 Aug 2017 18:46:27 +0300
Subject: [PATCH 30/39] Updated samples for material design. Fixed sorting
 icons display issue for IE. Fixed content alignment for fixed header sample

---
 demo/fixed-header/angular-md-grid.html        | 388 +++++++++---------
 .../css/angular-data-grid.material.css        |  42 +-
 demo/material/index.html                      |  46 ++-
 .../scss/angular-data-grid.material.scss      |  44 +-
 .../scss/angular-data-grid.variables.scss     |   3 +-
 5 files changed, 251 insertions(+), 272 deletions(-)

diff --git a/demo/fixed-header/angular-md-grid.html b/demo/fixed-header/angular-md-grid.html
index 96aeb30..46dfd74 100644
--- a/demo/fixed-header/angular-md-grid.html
+++ b/demo/fixed-header/angular-md-grid.html
@@ -21,34 +21,35 @@
         </div>
     </md-toolbar>
 
-    <div flex-gt-md="60" flex-md="80" flex-xs="100">
-        <div>
-            <h4>Fix Header Table</h4>
+    <div layout-padding layout="row" layout-align="center">
+        <div flex-gt-md="60" flex-md="80" flex-xs="100">
+            <div>
+                <h4>Fix Header Table</h4>
 
-            <p>Features enabled: sorting, filtering, sync with browser URLs, pagination, item-per-page and fixed-header functionality.
-                Out-of-box <a href="https://material.angularjs.org/" target="_blank">Angular Material</a> layout and
-                input controls used,
-                along with <a href="http://www.getmdl.io/" target="_blank">Material Design Light</a> default CSS for
-                grid styling.
-                <a href="https://github.com/angular-data-grid/angular-data-grid.github.io"
-                   target="_blank">Project GitHub</a></p>
+                <p>Features enabled: sorting, filtering, sync with browser URLs, pagination, item-per-page and fixed-header functionality.
+                    Out-of-box <a href="https://material.angularjs.org/" target="_blank">Angular Material</a> layout and
+                    input controls used,
+                    along with <a href="http://www.getmdl.io/" target="_blank">Material Design Light</a> default CSS for
+                    grid styling.
+                    <a href="https://github.com/angular-data-grid/angular-data-grid.github.io"
+                       target="_blank">Project GitHub</a></p>
 
-            <hr>
-            <h3>How To Freeze Table Header</h3>
-            <h4>Using HTML Layout</h4>
-            <div>
-                <p>The first option is to split table header and table body in two tables.
-                    One way to do this is to follow the next steps:</p>
-                <ul>
-                    <li>Use the next styles (with any fixed height) applied to table body container to make it scrollable: <br>
-                        <code>.div-table-body { height: 600px; overflow-x: auto; overflow-y: scroll; } </code> <br>
-                    </li>
-                    <li>Make sure that <code>th</code> elements have the same padding as <code>td</code> elements have.</li>
-                    <li>Use <code>padding-right</code> with the value of scroll bar width to make an offset for the table contains header.</li>
-                    <li>Use <code>width</code> attribute for columns to sync widths.</li>
-                </ul>
-                <p>Code Sample:
-                <pre>
+                <hr>
+                <h3>How To Freeze Table Header</h3>
+                <h4>Using HTML Layout</h4>
+                <div>
+                    <p>The first option is to split table header and table body in two tables.
+                        One way to do this is to follow the next steps:</p>
+                    <ul>
+                        <li>Use the next styles (with any fixed height) applied to table body container to make it scrollable: <br>
+                            <code>.div-table-body { height: 600px; overflow-x: auto; overflow-y: scroll; } </code> <br>
+                        </li>
+                        <li>Make sure that <code>th</code> elements have the same padding as <code>td</code> elements have.</li>
+                        <li>Use <code>padding-right</code> with the value of scroll bar width to make an offset for the table contains header.</li>
+                        <li>Use <code>width</code> attribute for columns to sync widths.</li>
+                    </ul>
+                    <p>Code Sample:
+                    <pre>
 &lt;table&gt;
     &lt;thead&gt;
         ...
@@ -60,182 +61,187 @@ <h4>Using HTML Layout</h4>
     &lt;/tbody&gt;
 &lt;/table&gt;
         </pre>
-                </p>
-            </div>
-            <h4>Using Stand-alone Directive</h4>
-            <div>
-                <p>Another option is to use the directive <code>fixed-header</code> that can be injected to the Data Grid like a separate module <code>dataGridUtils</code>.</p>
-                <p>To make it work it is needed to perform next steps:</p>
-                <ul>
-                    <li>Include script to your application: <br>
-                        <code>&lt;script src="bower_components/angular-data-grid/dist/dataGridUtils.min.js"&gt;&lt;/script&gt;</code>
-                    </li>
-                    <li>Include css stylesheets to your application: <br>
-                        <code>&lt;link rel="stylesheet" href="bower_components/angular-data-grid/css/fixedHeader/fixed-header.css"&gt;</code>
-                    </li>
-                    <li>Inject dataGridUtils dependency in your module: <br>
-                        <code>angular.module('myApp', ['dataGrid', 'dataGridUtils.fixedHeader'])</code>
-                    </li>
-                    <li>Apply the directive <code>fixed-header</code> to the grid table: <br>
-                        <code>&lt;table class="table" fixed-header&gt;</code>
-                    </li>
-                </ul>
-                <p>The directive uses <code>z-index: 99</code> if your page uses the same value or higher please make appropriate changes to <b>fixed-header.scss</b> file. </p>
-                <p>The directive also has additional attribute <code>offset-from-element</code>.
-                    It is needed if you already have some other elements with fixed position above the table.
-                    In this case you need to pass a class or id of the very last element (if there are several) to this attribute
-                    to make the directive take
-                    into consideration that header needs to be fixed with offset from above elements.</p>
-                <p>Example: <br>
+                    </p>
+                </div>
+                <h4>Using Stand-alone Directive</h4>
+                <div>
+                    <p>Another option is to use the directive <code>fixed-header</code> that can be injected to the Data Grid like a separate module <code>dataGridUtils</code>.</p>
+                    <p>To make it work it is needed to perform next steps:</p>
+                    <ul>
+                        <li>Include script to your application: <br>
+                            <code>&lt;script src="bower_components/angular-data-grid/dist/dataGridUtils.min.js"&gt;&lt;/script&gt;</code>
+                        </li>
+                        <li>Include css stylesheets to your application: <br>
+                            <code>&lt;link rel="stylesheet" href="bower_components/angular-data-grid/css/fixedHeader/fixed-header.css"&gt;</code>
+                        </li>
+                        <li>Inject dataGridUtils dependency in your module: <br>
+                            <code>angular.module('myApp', ['dataGrid', 'dataGridUtils.fixedHeader'])</code>
+                        </li>
+                        <li>Apply the directive <code>fixed-header</code> to the grid table: <br>
+                            <code>&lt;table class="table" fixed-header&gt;</code>
+                        </li>
+                    </ul>
+                    <p>The directive uses <code>z-index: 99</code> if your page uses the same value or higher please make appropriate changes to <b>fixed-header.scss</b> file. </p>
+                    <p>The directive also has additional attribute <code>offset-from-element</code>.
+                        It is needed if you already have some other elements with fixed position above the table.
+                        In this case you need to pass a class or id of the very last element (if there are several) to this attribute
+                        to make the directive take
+                        into consideration that header needs to be fixed with offset from above elements.</p>
+                    <p>Example: <br>
                     <pre>&lt;table class="table" fixed-header offset-from-element=".the-class-on-above-fixed-element"&gt;</pre>
                     or
                     <pre>&lt;table class="table" fixed-header offset-from-element="#the-id-on-above-fixed-element”&gt;</pre>
-                </p>
-                <br>
-                <p>The directive subscribes on scroll event, but the event is not fired when directive is used inside <code>&lt;md-content&gt;</code>, so to make it work please use the directive outside the <code>&lt;md-content&gt;</code> container.
-                    For more information about this problem please review this <a href="https://github.com/angular/material/issues/6657">issue</a>.
-                </p>
+                    </p>
+                    <br>
+                    <p>The directive subscribes on scroll event, but the event is not fired when directive is used inside <code>&lt;md-content&gt;</code>, so to make it work please use the directive
+                        outside the <code>&lt;md-content&gt;</code> container.
+                        For more information about this problem please review this <a href="https://github.com/angular/material/issues/6657">issue</a>.
+                    </p>
+                </div>
             </div>
             <hr>
-        </div>
-        <hr>
-        <div layout-gt-xs="row" layout-xs="column" layout-align="stretch center">
-            <div layout="row" layout-align="center start">
-                <md-input-container md-no-float md-is-error="false" class="md-block flex-gt-xs flex-xs">
-                    <input ng-model="code"
-                           class="md-input"
-                           ng-change="gridActions.filter()"
-                           id="order"
-                           placeholder="Search by Order #"
-                           filter-by="code"
-                           filter-type="text"
-                           aria-invalid="false">
-                </md-input-container>
-            </div>
-            <div layout="row" layout-align="start center">
-                <md-datepicker ng-model="dateFrom"
-                               flex="100"
-                               md-placeholder="From Date"
-                               is-open="dateFromOpened"
-                               ng-click="dateFromOpened = true"
-                               filter-by="placed"
-                               filter-type="dateFrom"
-                               ng-change="gridActions.filter()"></md-datepicker>
-            </div>
-            <div layout="row" layout-align="start center">
-                <md-datepicker ng-model="dateTo"
-                               flex="100"
-                               md-placeholder="To Date"
-                               is-open="dateToOpened"
-                               ng-click="dateToOpened = true"
-                               filter-by="placed"
-                               filter-type="dateTo"
-                               ng-change="gridActions.filter()"></md-datepicker>
-            </div>
-            <div layout="row" layout-align="start center">
-                <md-button ng-show="dateTo || dateFrom" class="md-raised md-primary"
-                           ng-click="dateTo = ''; dateFrom = ''; gridActions.refresh();">Clear Dates
-                </md-button>
-            </div>
-        </div>
-        <div grid-data id='test' grid-options="gridOptions" grid-actions="gridActions">
-            <div layout-gt-sm="row" layout-sm="column" layout-align="center">
-                <div flex-gt-sm="25" flex-sm="100" layout="row" layout-align="start center">
-                    <span>{{filtered.length}} items total</span>
+            <div layout-gt-xs="row" layout-xs="column" layout-align="stretch center">
+                <div layout="row" layout-align="start center">
+                    <md-input-container md-no-float md-is-error="false" class="md-block">
+                        <input ng-model="code"
+                               class="md-input"
+                               ng-change="gridActions.filter()"
+                               id="order"
+                               placeholder="Search by Order #"
+                               filter-by="code"
+                               filter-type="text"
+                               aria-invalid="false">
+                    </md-input-container>
                 </div>
-                <div flex-gt-sm="75" flex-xs="100">
-                    <div layout-xs="column" layout="row" layout-align-xs="end end" layout-align="end center">
-                        <grid-pagination max-size="5"
-                                         boundary-links="true"
-                                         class="pagination mdl-shadow--2dp"
-                                         ng-if="paginationOptions.totalItems  > paginationOptions.itemsPerPage"
-                                         total-items="paginationOptions.totalItems"
-                                         ng-model="paginationOptions.currentPage"
-                                         ng-change="reloadGrid()"
-                                         items-per-page="paginationOptions.itemsPerPage"></grid-pagination>
-                        <md-input-container flex-offset-gt-xs="5" class="items-per-page">
-                            <md-select
-                                       ng-model="paginationOptions.itemsPerPage" ng-change="reloadGrid()">
-                                <md-option>10</md-option>
-                                <md-option>25</md-option>
-                                <md-option>50</md-option>
-                                <md-option>75</md-option>
-                            </md-select>
-                        </md-input-container>
-                    </div>
+                <div layout="row" layout-align="start center">
+                    <md-datepicker ng-model="dateFrom"
+                                   md-placeholder="From Date"
+                                   is-open="dateFromOpened"
+                                   ng-click="dateFromOpened = true"
+                                   filter-by="placed"
+                                   filter-type="dateFrom"
+                                   ng-change="gridActions.filter()">
+                    </md-datepicker>
+                </div>
+                <div layout="row" layout-align="start center">
+                    <md-datepicker ng-model="dateTo"
+                                   md-placeholder="To Date"
+                                   is-open="dateToOpened"
+                                   ng-click="dateToOpened = true"
+                                   filter-by="placed"
+                                   filter-type="dateTo"
+                                   ng-change="gridActions.filter()">
+                    </md-datepicker>
+                </div>
+                <div layout="row" layout-align="start center">
+                    <md-button ng-show="dateTo || dateFrom"
+                               class="md-raised md-primary"
+                               ng-click="dateTo = ''; dateFrom = ''; gridActions.refresh();">Clear Dates
+                    </md-button>
                 </div>
             </div>
-            <div>
-                <table class="mdl-data-table mdl-js-data-table mdl-data-table--selectable mdl-shadow--2dp" fixed-header>
-                    <thead>
-                    <tr>
-                        <th sortable="code" class="sortable mdl-data-table__cell--non-numeric">
-                            <span>Order #</span>
-                        </th>
-                        <th class="st-sort-disable th-dropdown">
-                            <md-select filter-by="statusDisplay"
-                                       filter-type="select"
-                                       ng-model="status"
-                                       placeholder="Status"
-                                       ng-change="filter()">
-                                <md-option value="">All Statuses</md-option>
-                                <md-option ng-repeat="option in statusOptions track by option.value"
-                                           value="{{option.value}}">
-                                    {{option.text}}
-                                </md-option>
-                            </md-select>
-                        </th>
-                        <th sortable="placed" class="sortable">
-                            <span>Date Placed</span>
-                        </th>
-                        <th sortable='total.value' class="sortable">
-                            <span>Total</span>
-                        </th>
-                    </tr>
-                    </thead>
-                    <tbody>
-                    <tr grid-item>
-                        <td class="mdl-data-table__cell--non-numeric">
-                            <span ng-bind="item.code"></span>
-                        </td>
-                        <td ng-bind="item.statusDisplay"></td>
-                        <td ng-bind="item.placed | date:'MM/dd/yyyy'"></td>
-                        <td ng-bind="item.total.formattedValue"></td>
-                    </tr>
-                    </tbody>
-                </table>
+            <div grid-data id='test' grid-options="gridOptions" grid-actions="gridActions">
+                <div layout-gt-sm="row" layout-sm="column" layout-align="center">
+                    <div flex-gt-sm="25" flex-sm="100" layout="row" layout-align="start center">
+                        <span>{{filtered.length}} items total</span>
+                    </div>
+                    <div flex-gt-sm="75" flex-xs="100">
+                        <div layout-xs="column" layout="row" layout-align-xs="end end" layout-align="end center">
+                            <grid-pagination max-size="5"
+                                             boundary-links="true"
+                                             class="pagination mdl-shadow--2dp"
+                                             ng-if="paginationOptions.totalItems  > paginationOptions.itemsPerPage"
+                                             total-items="paginationOptions.totalItems"
+                                             ng-model="paginationOptions.currentPage"
+                                             ng-change="reloadGrid()"
+                                             items-per-page="paginationOptions.itemsPerPage"></grid-pagination>
+                            <md-input-container flex-offset-gt-xs="5" class="items-per-page">
+                                <md-select
+                                        ng-model="paginationOptions.itemsPerPage" ng-change="reloadGrid()">
+                                    <md-option>10</md-option>
+                                    <md-option>25</md-option>
+                                    <md-option>50</md-option>
+                                    <md-option>75</md-option>
+                                </md-select>
+                            </md-input-container>
+                        </div>
+                    </div>
+                </div>
+                <div>
+                    <table class="mdl-data-table mdl-js-data-table mdl-data-table--selectable mdl-shadow--2dp" fixed-header>
+                        <thead>
+                        <tr>
+                            <th sortable="code" class="sortable mdl-data-table__cell--non-numeric">
+                                <span>Order #</span>
+                                <span class="arrow"></span>
+                            </th>
+                            <th class="st-sort-disable th-dropdown">
+                                <md-select filter-by="statusDisplay"
+                                           filter-type="select"
+                                           ng-model="status"
+                                           placeholder="Status"
+                                           ng-change="filter()">
+                                    <md-option value="">All Statuses</md-option>
+                                    <md-option ng-repeat="option in statusOptions track by option.value"
+                                               value="{{option.value}}">
+                                        {{option.text}}
+                                    </md-option>
+                                </md-select>
+                            </th>
+                            <th sortable="placed" class="sortable">
+                                <span>Date Placed</span>
+                                <span class="arrow"></span>
+                            </th>
+                            <th sortable='total.value' class="sortable">
+                                <span>Total</span>
+                                <span class="arrow"></span>
+                            </th>
+                        </tr>
+                        </thead>
+                        <tbody>
+                        <tr grid-item>
+                            <td class="mdl-data-table__cell--non-numeric">
+                                <span ng-bind="item.code"></span>
+                            </td>
+                            <td ng-bind="item.statusDisplay"></td>
+                            <td ng-bind="item.placed | date:'MM/dd/yyyy'"></td>
+                            <td ng-bind="item.total.formattedValue"></td>
+                        </tr>
+                        </tbody>
+                    </table>
+                </div>
+                <div layout-xs="column" layout="row" layout-align-xs="end end" layout-align="end center">
+                    <grid-pagination max-size="5"
+                                     boundary-links="true"
+                                     class="pagination"
+                                     ng-if="paginationOptions.totalItems  > paginationOptions.itemsPerPage"
+                                     total-items="paginationOptions.totalItems"
+                                     ng-model="paginationOptions.currentPage"
+                                     ng-change="reloadGrid()"
+                                     items-per-page="paginationOptions.itemsPerPage"></grid-pagination>
+                    <md-input-container flex-offset-gt-xs="5" class="items-per-page">
+                        <md-select ng-model="paginationOptions.itemsPerPage"
+                                   ng-change="reloadGrid()">
+                            <md-option>10</md-option>
+                            <md-option>25</md-option>
+                            <md-option>50</md-option>
+                            <md-option>75</md-option>
+                        </md-select>
+                    </md-input-container>
+                </div>
             </div>
-            <div layout-xs="column" layout="row" layout-align-xs="end end" layout-align="end center">
-                <grid-pagination max-size="5"
-                                 boundary-links="true"
-                                 class="pagination"
-                                 ng-if="paginationOptions.totalItems  > paginationOptions.itemsPerPage"
-                                 total-items="paginationOptions.totalItems"
-                                 ng-model="paginationOptions.currentPage"
-                                 ng-change="reloadGrid()"
-                                 items-per-page="paginationOptions.itemsPerPage"></grid-pagination>
-                <md-input-container flex-offset-gt-xs="5" class="items-per-page">
-                    <md-select ng-model="paginationOptions.itemsPerPage"
-                               ng-change="reloadGrid()">
-                        <md-option>10</md-option>
-                        <md-option>25</md-option>
-                        <md-option>50</md-option>
-                        <md-option>75</md-option>
-                    </md-select>
-                </md-input-container>
+            <hr>
+            <md-button class="md-raised md-primary" ng-click="showCode = !showCode">CodePen</md-button>
+            <div ng-show="showCode" class="codepen-wrap">
+                <p data-height="768" data-theme-id="21603" data-slug-hash="bqXarG" data-default-tab="html"
+                   data-user="AngularDataGrid" class='codepen'>See the Pen <a
+                        href='http://codepen.io/AngularDataGrid/pen/bqXarG'>eJWWpM</a> by AngularDataGrid (<a
+                        href='http://codepen.io/AngularDataGrid'>@AngularDataGrid</a>) on <a href='http://codepen.io'>CodePen</a>.
+                </p>
+                <script async src="//assets.codepen.io/assets/embed/ei.js"></script>
             </div>
+            <hr>
         </div>
-        <hr>
-        <md-button class="md-raised md-primary" ng-click="showCode = !showCode">CodePen</md-button>
-        <div ng-show="showCode" class="codepen-wrap">
-            <p data-height="768" data-theme-id="21603" data-slug-hash="bqXarG" data-default-tab="html"
-               data-user="AngularDataGrid" class='codepen'>See the Pen <a
-                    href='http://codepen.io/AngularDataGrid/pen/bqXarG'>eJWWpM</a> by AngularDataGrid (<a
-                    href='http://codepen.io/AngularDataGrid'>@AngularDataGrid</a>) on <a href='http://codepen.io'>CodePen</a>.
-            </p>
-            <script async src="//assets.codepen.io/assets/embed/ei.js"></script>
-        </div>
-        <hr>
     </div>
 </div>
 </body>
diff --git a/demo/material/css/angular-data-grid.material.css b/demo/material/css/angular-data-grid.material.css
index 7e6dc66..7edbd95 100644
--- a/demo/material/css/angular-data-grid.material.css
+++ b/demo/material/css/angular-data-grid.material.css
@@ -51,33 +51,19 @@ th md-select {
     .pagination-page.active a {
       color: #fff; }
 
-.material-icons, .sortable span:before, .sortable span:after {
-  font-family: 'Material Icons';
-  font-size: 18px;
-  -webkit-font-feature-settings: 'liga';
-  -webkit-font-smoothing: antialiased; }
+.sortable .arrow {
+  position: relative;
+  width: 0;
+  height: 0;
+  border-left: 4px solid transparent;
+  border-right: 4px solid transparent; }
 
-.sortable span {
-  position: relative; }
-  .sortable span:before {
-    content: 'arrow_drop_down';
-    position: absolute;
-    right: -18px;
-    top: -2px; }
-  .sortable span:after {
-    content: 'arrow_drop_up';
-    position: absolute;
-    right: -18px;
-    top: -9px; }
+.sortable.sort-ascent .arrow {
+  top: -10px;
+  left: 5px;
+  border-bottom: 4px solid #757575; }
 
-.sortable.sort-ascent span:before {
-  display: none; }
-
-.sortable.sort-ascent span:after {
-  top: -5px; }
-
-.sortable.sort-descent span:before {
-  top: -5px; }
-
-.sortable.sort-descent span:after {
-  display: none; }
+.sortable.sort-descent .arrow {
+  top: 10px;
+  left: 5px;
+  border-top: 4px solid #757575; }
diff --git a/demo/material/index.html b/demo/material/index.html
index a9846db..b457c91 100644
--- a/demo/material/index.html
+++ b/demo/material/index.html
@@ -14,7 +14,6 @@
     <md-toolbar layout="row" layout-align="center">
         <div class="md-toolbar-tools" flex-gt-md="60" flex-md="80" flex-sm="100">
             <span>Angular Data Grid &mdash; Material Design</span>
-            <span flex></span>
             <md-menu md-position-mode="target-right target">
                 <md-button ng-click="$mdOpenMenu($event)">
                     <span layout="row" layout-align="center center">
@@ -33,17 +32,15 @@
             </md-menu>
         </div>
     </md-toolbar>
-    <md-content layout-padding layout="row" layout-align="center">
+    <div layout-padding layout="row" layout-align="center">
         <div flex-gt-md="60" flex-md="80" flex-xs="100">
-            <div>
-                <h4>Angular Data Grid sample using Material Design styling</h4>
+            <h4>Angular Data Grid sample using Material Design styling</h4>
 
-                <p>Features enabled: sorting, filtering, sync with browser URLs, pagination and item-per-page functionality.
-                    Out-of-box <a href="https://material.angularjs.org/" target="_blank">Angular Material</a> layout and input controls used,
-                    along with <a href="http://www.getmdl.io/" target="_blank">Material Design Light</a> default CSS for grid styling.
-                    <a href="https://github.com/angular-data-grid/angular-data-grid.github.io"
-                       target="_blank">Project GitHub</a></p>
-            </div>
+            <p>Features enabled: sorting, filtering, sync with browser URLs, pagination and item-per-page functionality.
+                Out-of-box <a href="https://material.angularjs.org/" target="_blank">Angular Material</a> layout and input controls used,
+                along with <a href="http://www.getmdl.io/" target="_blank">Material Design Light</a> default CSS for grid styling.
+                <a href="https://github.com/angular-data-grid/angular-data-grid.github.io"
+                   target="_blank">Project GitHub</a></p>
             <h4>Additional Demos</h4>
             <ul>
                 <li>
@@ -51,9 +48,10 @@ <h4>Additional Demos</h4>
                 </li>
             </ul>
             <hr>
+
             <div layout-gt-xs="row" layout-xs="column" layout-align="stretch center">
-                <div  layout="row" layout-align="center start">
-                    <md-input-container md-no-float md-is-error="false" class="md-block flex-gt-xs flex-xs">
+                <div layout="row" layout-align="start center">
+                    <md-input-container md-no-float md-is-error="false" class="md-block">
                         <input ng-model="code"
                                class="md-input"
                                ng-change="gridActions.filter()"
@@ -64,28 +62,31 @@ <h4>Additional Demos</h4>
                                aria-invalid="false">
                     </md-input-container>
                 </div>
-                <div  layout="row" layout-align="start center">
+                <div layout="row" layout-align="start center">
                     <md-datepicker ng-model="dateFrom"
-                                   flex="100"
                                    md-placeholder="From Date"
                                    is-open="dateFromOpened"
                                    ng-click="dateFromOpened = true"
                                    filter-by="placed"
                                    filter-type="dateFrom"
-                                   ng-change="gridActions.filter()"></md-datepicker>
+                                   ng-change="gridActions.filter()">
+                    </md-datepicker>
                 </div>
-                <div  layout="row" layout-align="start center">
+                <div layout="row" layout-align="start center">
                     <md-datepicker ng-model="dateTo"
-                                   flex="100"
                                    md-placeholder="To Date"
                                    is-open="dateToOpened"
                                    ng-click="dateToOpened = true"
                                    filter-by="placed"
                                    filter-type="dateTo"
-                                   ng-change="gridActions.filter()"></md-datepicker>
+                                   ng-change="gridActions.filter()">
+                    </md-datepicker>
                 </div>
-                <div  layout="row" layout-align="start center">
-                    <md-button ng-show="dateTo || dateFrom" class="md-raised md-primary" ng-click="dateTo = ''; dateFrom = ''; gridActions.refresh();">Clear Dates</md-button>
+                <div layout="row" layout-align="start center">
+                    <md-button ng-show="dateTo || dateFrom"
+                               class="md-raised md-primary"
+                               ng-click="dateTo = ''; dateFrom = ''; gridActions.refresh();">Clear Dates
+                    </md-button>
                 </div>
             </div>
             <div grid-data id='test' grid-options="gridOptions" grid-actions="gridActions">
@@ -120,6 +121,7 @@ <h4>Additional Demos</h4>
                         <tr>
                             <th sortable="code" class="sortable mdl-data-table__cell--non-numeric">
                                 <span>Order #</span>
+                                <span class="arrow"></span>
                             </th>
                             <th class="st-sort-disable th-dropdown">
                                 <md-select filter-by="statusDisplay"
@@ -136,9 +138,11 @@ <h4>Additional Demos</h4>
                             </th>
                             <th sortable="placed" class="sortable">
                                 <span>Date Placed</span>
+                                <span class="arrow"></span>
                             </th>
                             <th sortable='total.value' class="sortable">
                                 <span>Total</span>
+                                <span class="arrow"></span>
                             </th>
                         </tr>
                         </thead>
@@ -183,7 +187,7 @@ <h4>Additional Demos</h4>
             </div>
             <hr>
         </div>
-    </md-content>
+    </div>
 </div>
 </body>
 
diff --git a/demo/material/scss/angular-data-grid.material.scss b/demo/material/scss/angular-data-grid.material.scss
index ff688a7..fdb8d81 100644
--- a/demo/material/scss/angular-data-grid.material.scss
+++ b/demo/material/scss/angular-data-grid.material.scss
@@ -64,44 +64,26 @@ th md-select {
     }
   }
 }
-.material-icons {
-  font-family: 'Material Icons';
-  font-size: 18px;
-  -webkit-font-feature-settings: 'liga';
-  -webkit-font-smoothing: antialiased;
-}
 .sortable {
-  span {
+  .arrow {
     position: relative;
-    &:before {
-      @extend .material-icons;
-      content: 'arrow_drop_down';
-      position: absolute;
-      right: -18px;
-      top: -2px;
-    }
-    &:after {
-      @extend .material-icons;
-      content: 'arrow_drop_up';
-      position: absolute;
-      right: -18px;
-      top: -9px;
-    }
+    width: 0;
+    height: 0;
+    border-left: 4px solid transparent;
+    border-right: 4px solid transparent;
   }
   &.sort-ascent {
-    span:before {
-      display: none;
-    }
-    span:after {
-      top: -5px
+    .arrow {
+      top: -10px;
+      left: 5px;
+      border-bottom: 4px solid $backgroundArrows;
     }
   }
   &.sort-descent {
-    span:before {
-      top: -5px
-    }
-    span:after {
-      display: none;
+    .arrow {
+      top: 10px;
+      left: 5px;
+      border-top: 4px solid $backgroundArrows;
     }
   }
 }
\ No newline at end of file
diff --git a/demo/material/scss/angular-data-grid.variables.scss b/demo/material/scss/angular-data-grid.variables.scss
index 60b1dda..2c7053a 100644
--- a/demo/material/scss/angular-data-grid.variables.scss
+++ b/demo/material/scss/angular-data-grid.variables.scss
@@ -2,4 +2,5 @@ $backgroundActive: rgb(63, 81, 181);
 $foregroundActive: #fff;
 $foregroundPagination: #ddd;
 $foregroundDefault: #444;
-$backgroundIcons: #333;
\ No newline at end of file
+$backgroundIcons: #333;
+$backgroundArrows: #757575;
\ No newline at end of file

From 4b2ace651c087bceac8952b49127c0ad739b219d Mon Sep 17 00:00:00 2001
From: Andrey Chayko <chaiko.work@gmail.com>
Date: Thu, 17 Aug 2017 15:07:28 +0300
Subject: [PATCH 31/39] Updated angular material version to 1.1.4 and material
 design lite to version 1.3.0

---
 demo/fixed-header/angular-md-grid.html | 22 +++++++++++-----------
 demo/material/index.html               | 22 +++++++++++-----------
 2 files changed, 22 insertions(+), 22 deletions(-)

diff --git a/demo/fixed-header/angular-md-grid.html b/demo/fixed-header/angular-md-grid.html
index 46dfd74..78f4215 100644
--- a/demo/fixed-header/angular-md-grid.html
+++ b/demo/fixed-header/angular-md-grid.html
@@ -5,8 +5,8 @@
     <title>Angular Data Grid - Fix Header Table</title>
     <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic">
-    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
-    <link rel="stylesheet" href="https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-blue.min.css">
+    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.4/angular-material.min.css">
+    <link rel="stylesheet" href="https://storage.googleapis.com/code.getmdl.io/1.3.0/material.indigo-blue.min.css">
     <link rel="stylesheet" href="../../demo/material/css/angular-data-grid.material.css">
     <link rel="stylesheet" href="../../dist/css/fixedHeader/fixed-header.css">
     <link rel="stylesheet" href="css/fixed-header.material.css">
@@ -158,10 +158,10 @@ <h4>Using Stand-alone Directive</h4>
                             <md-input-container flex-offset-gt-xs="5" class="items-per-page">
                                 <md-select
                                         ng-model="paginationOptions.itemsPerPage" ng-change="reloadGrid()">
-                                    <md-option>10</md-option>
-                                    <md-option>25</md-option>
-                                    <md-option>50</md-option>
-                                    <md-option>75</md-option>
+                                    <md-option ng-value="10">10</md-option>
+                                    <md-option ng-value="25">25</md-option>
+                                    <md-option ng-value="50">50</md-option>
+                                    <md-option ng-value="75">75</md-option>
                                 </md-select>
                             </md-input-container>
                         </div>
@@ -222,10 +222,10 @@ <h4>Using Stand-alone Directive</h4>
                     <md-input-container flex-offset-gt-xs="5" class="items-per-page">
                         <md-select ng-model="paginationOptions.itemsPerPage"
                                    ng-change="reloadGrid()">
-                            <md-option>10</md-option>
-                            <md-option>25</md-option>
-                            <md-option>50</md-option>
-                            <md-option>75</md-option>
+                            <md-option ng-value="10">10</md-option>
+                            <md-option ng-value="25">25</md-option>
+                            <md-option ng-value="50">50</md-option>
+                            <md-option ng-value="75">75</md-option>
                         </md-select>
                     </md-input-container>
                 </div>
@@ -250,7 +250,7 @@ <h4>Using Stand-alone Directive</h4>
 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-animate.min.js"></script>
 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-aria.min.js"></script>
 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-messages.min.js"></script>
-<script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
+<script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.4/angular-material.min.js"></script>
 <script src="../../dist/pagination.min.js"></script>
 <script src="../../dist/dataGrid.min.js"></script>
 <script src="../../dist/dataGridUtils.min.js"></script>
diff --git a/demo/material/index.html b/demo/material/index.html
index b457c91..76acecd 100644
--- a/demo/material/index.html
+++ b/demo/material/index.html
@@ -5,8 +5,8 @@
     <title>Angular Data Grid - Material Design</title>
     <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic">
-    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
-    <link rel="stylesheet" href="https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-blue.min.css">
+    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.4/angular-material.min.css">
+    <link rel="stylesheet" href="https://storage.googleapis.com/code.getmdl.io/1.3.0/material.indigo-blue.min.css">
     <link rel="stylesheet" href="css/angular-data-grid.material.css">
 </head>
 <body ng-app="myApp" ng-controller="myAppController" ng-cloak>
@@ -106,10 +106,10 @@ <h4>Additional Demos</h4>
                                              items-per-page="paginationOptions.itemsPerPage"></grid-pagination>
                             <md-input-container flex-offset-gt-xs="5" class="items-per-page">
                                 <md-select ng-init="paginationOptions.itemsPerPage = '10'" ng-model="paginationOptions.itemsPerPage" ng-change="reloadGrid()">
-                                    <md-option>10</md-option>
-                                    <md-option>25</md-option>
-                                    <md-option>50</md-option>
-                                    <md-option>75</md-option>
+                                    <md-option ng-value="10">10</md-option>
+                                    <md-option ng-value="25">25</md-option>
+                                    <md-option ng-value="50">50</md-option>
+                                    <md-option ng-value="75">75</md-option>
                                 </md-select>
                             </md-input-container>
                         </div>
@@ -169,10 +169,10 @@ <h4>Additional Demos</h4>
                                      items-per-page="paginationOptions.itemsPerPage"></grid-pagination>
                     <md-input-container flex-offset-gt-xs="5" class="items-per-page">
                         <md-select ng-init="paginationOptions.itemsPerPage = '10'" ng-model="paginationOptions.itemsPerPage" ng-change="reloadGrid()">
-                            <md-option>10</md-option>
-                            <md-option>25</md-option>
-                            <md-option>50</md-option>
-                            <md-option>75</md-option>
+                            <md-option ng-value="10">10</md-option>
+                            <md-option ng-value="25">25</md-option>
+                            <md-option ng-value="50">50</md-option>
+                            <md-option ng-value="75">75</md-option>
                         </md-select>
                     </md-input-container>
                 </div>
@@ -195,7 +195,7 @@ <h4>Additional Demos</h4>
 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-animate.min.js"></script>
 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-aria.min.js"></script>
 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-messages.min.js"></script>
-<script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
+<script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.4/angular-material.min.js"></script>
 <script src="../../dist/pagination.min.js"></script>
 <script src="../../dist/dataGrid.min.js"></script>
 <script src="js/demoApp.js"></script>

From fa133e63aa54fc8260d445f19f69978c40452498 Mon Sep 17 00:00:00 2001
From: Alexander Zhuk <AZhuk@lifetimefitness.com>
Date: Thu, 17 Aug 2017 15:30:43 +0300
Subject: [PATCH 32/39] Export grid data #54 fix - feature added

---
 README.md                            |    1 +
 demo/bootstrap/index.html            |   32 +-
 demo/bootstrap/js/demoApp.js         |   15 +-
 demo/data.json                       | 1907 ++++++++++----------------
 dist/JSONToCSVConvertor.js           |   84 ++
 src/js/vendors/JSONToCSVConvertor.js |   84 ++
 6 files changed, 956 insertions(+), 1167 deletions(-)
 create mode 100644 dist/JSONToCSVConvertor.js
 create mode 100644 src/js/vendors/JSONToCSVConvertor.js

diff --git a/README.md b/README.md
index b20ed11..b1dc410 100644
--- a/README.md
+++ b/README.md
@@ -17,6 +17,7 @@ Demo Angular UI Router: http://angular-data-grid.github.io/demo/bootstrap/ui-rou
  - Built-in sync with browser address bar (URL), so you can copy-n-paste sorting/filtering/pagination results URL and open it in other browser / send to anyone - even if pagination / filtering are done on a client-side. [See details](#url-synchronization)
  - Support of [Angular UI Router](https://github.com/angular-ui/ui-router) navigation.
  - Optional support of fixed header table: [Bootstrap Demo](http://angular-data-grid.github.io/demo/fixed-header/bootstrap-grid.html) [Material Design Demo](http://angular-data-grid.github.io/demo/fixed-header/angular-md-grid.html)
+ - Optional support of CSV data exports: [Demo](http://angular-data-grid.github.io/demo/bootstrap/)
  - Unlike most part of other Angular DataGrids, we intentionally use non-isolated scope of the directive to maximize flexibility, so it can be easily synchronized with any data changes inside your controller. 
  NOTE! With great power comes great responsibility, so use non-isolated API wisely.
 
diff --git a/demo/bootstrap/index.html b/demo/bootstrap/index.html
index 061eb5b..fecbd10 100644
--- a/demo/bootstrap/index.html
+++ b/demo/bootstrap/index.html
@@ -30,7 +30,8 @@
 <div class="container">
     <div class="margin-bottom-basic">
         <h3>Angular Data Grid sample using out-of-box Bootstrap styling</h3>
-        Features enabled: sorting, filtering (using both in-grid and external controls), sync with browser URLs, pagination and items-per-page functionality.
+        Features enabled: sorting, filtering (using both in-grid and external controls), sync with browser URLs,
+        pagination and items-per-page functionality, plus optional plugin for CSV exports.
         Angular UI Datepicker used for date controls, although you can use any other framework, plugin or styling.
         <a href="https://github.com/angular-data-grid/angular-data-grid.github.io" target="_blank">Project GitHub</a>
     </div>
@@ -88,7 +89,7 @@ <h4>Additional Demos</h4>
                                ng-focus="gridActions.filter()"
                                show-weeks="false"
                                close-text="Close"/>
-           <span class="input-group-btn">
+                        <span class="input-group-btn">
                             <label for="dateFromFilter" class="btn btn-default">
                                 <i class="fa fa-calendar"></i></label>
                           </span>
@@ -118,7 +119,7 @@ <h4>Additional Demos</h4>
                                ng-focus="gridActions.filter()"
                                show-weeks="false"
                                close-text="Close">
-                 <span class="input-group-btn">
+                        <span class="input-group-btn">
                             <label for="dateToInput" class="btn btn-default">
                                 <i class="fa fa-calendar"></i></label>
                           </span>
@@ -131,6 +132,13 @@ <h4>Additional Demos</h4>
         </div>
     </div>
     <hr>
+    <div class="text-right">
+        <button class="btn btn-default" ng-click="exportToCsv(gridOptions.data)">Export all data to CSV <i
+                class="fa fa-download"></i></button>
+        <button class="btn btn-default" ng-click="exportToCsv(gridOptions.grid.filtered)">Export filtered data to CSV <i
+                class="fa fa-download"></i></button>
+    </div>
+    <hr>
     <div class="row">
         <div class="col-md-12">
             <div grid-data id='test' grid-options="gridOptions" grid-actions="gridActions">
@@ -151,7 +159,9 @@ <h4>Additional Demos</h4>
                             </div>
                             <div class="form-group items-per-page">
                                 <label for="itemsOnPageSelect1">Items per page:</label>
-                                <select id="itemsOnPageSelect1" class="form-control input-sm" ng-init="paginationOptions.itemsPerPage = '10'" ng-model="paginationOptions.itemsPerPage" ng-change="reloadGrid()">
+                                <select id="itemsOnPageSelect1" class="form-control input-sm"
+                                        ng-init="paginationOptions.itemsPerPage = '10'"
+                                        ng-model="paginationOptions.itemsPerPage" ng-change="reloadGrid()">
                                     <option>10</option>
                                     <option>25</option>
                                     <option>50</option>
@@ -208,7 +218,8 @@ <h4>Additional Demos</h4>
                     </div>
                     <div class="form-group items-per-page">
                         <label for="itemsOnPageSelect2">Items per page:</label>
-                        <select id="itemsOnPageSelect2" class="form-control input-sm" ng-init="paginationOptions.itemsPerPage = '10'"
+                        <select id="itemsOnPageSelect2" class="form-control input-sm"
+                                ng-init="paginationOptions.itemsPerPage = '10'"
                                 ng-model="paginationOptions.itemsPerPage" ng-change="reloadGrid()">
                             <option>10</option>
                             <option>25</option>
@@ -224,14 +235,16 @@ <h4>Additional Demos</h4>
     <div>
         <button class="btn btn-info margin-bottom-basic" ng-click="showCode = !showCode">CodePen</button>
         <div ng-show="showCode">
-            <p data-height="768" data-theme-id="21603" data-slug-hash="xZddZm" data-default-tab="html" data-user="AngularDataGrid" class='codepen'>See the Pen <a
-                    href='http://codepen.io/AngularDataGrid/pen/xZddZm/'>xZddZm</a> by AngularDataGrid (<a href='http://codepen.io/AngularDataGrid'>@AngularDataGrid</a>) on <a href='http://codepen.io'>CodePen</a>.</p>
+            <p data-height="768" data-theme-id="21603" data-slug-hash="xZddZm" data-default-tab="html"
+               data-user="AngularDataGrid" class='codepen'>See the Pen <a
+                    href='http://codepen.io/AngularDataGrid/pen/xZddZm/'>xZddZm</a> by AngularDataGrid (<a
+                    href='http://codepen.io/AngularDataGrid'>@AngularDataGrid</a>) on <a href='http://codepen.io'>CodePen</a>.
+            </p>
             <script async src="//assets.codepen.io/assets/embed/ei.js"></script>
         </div>
     </div>
     <hr>
 </div>
-</body>
 <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
 <script src="https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.js"></script>
@@ -240,6 +253,7 @@ <h4>Additional Demos</h4>
 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-messages.min.js"></script>
 <script src="../../dist/pagination.min.js"></script>
 <script src="../../dist/dataGrid.min.js"></script>
+<script src="../../dist/JSONToCSVConvertor.min.js"></script>
 <script src="js/demoApp.js"></script>
-
+</body>
 </html>
\ No newline at end of file
diff --git a/demo/bootstrap/js/demoApp.js b/demo/bootstrap/js/demoApp.js
index a877d2e..c8d5854 100644
--- a/demo/bootstrap/js/demoApp.js
+++ b/demo/bootstrap/js/demoApp.js
@@ -1,5 +1,5 @@
 angular.module('myApp', ['ui.bootstrap', 'dataGrid', 'pagination'])
-    .controller('myAppController', ['$scope', 'myAppFactory', function ($scope, myAppFactory) {
+    .controller('myAppController', ['$scope', 'myAppFactory', '$filter', function ($scope, myAppFactory, $filter) {
 
         $scope.gridOptions = {
             data: [],
@@ -10,6 +10,19 @@ angular.module('myApp', ['ui.bootstrap', 'dataGrid', 'pagination'])
             $scope.gridOptions.data = responseData.data;
         });
 
+        $scope.exportToCsv = function (currentData) {
+            var exportData = [];
+            currentData.forEach(function (item) {
+                exportData.push({
+                    'Code': item.code,
+                    'Date Placed': $filter('date')(item.placed, 'shortDate'),
+                    'Status': item.statusDisplay,
+                    'Total': item.total.formattedValue
+                });
+            });
+            JSONToCSVConvertor(exportData, 'Export', true);
+        }
+
     }])
     .factory('myAppFactory', function ($http) {
         return {
diff --git a/demo/data.json b/demo/data.json
index f2c15dc..edecf93 100644
--- a/demo/data.json
+++ b/demo/data.json
@@ -1,1157 +1,750 @@
-[{
-  "total": {
-    "currencyIso": "USD",
-    "priceType": "BUY",
-    "value": 6100.00,
-    "maxQuantity": null,
-    "minQuantity": null,
-    "formattedValue": "$6,100.00"
-  },
-  "guid": null,
-  "managers": null,
-  "purchaseOrderNumber": null,
-  "status": null,
-  "b2bPermissionResults": null,
-  "statusDisplay": "Valid",
-  "code": "3747453",
-  "placed": 1417402800000
-}, {
-  "total": {
-    "currencyIso": "USD",
-    "priceType": "BUY",
-    "value": 1100.00,
-    "maxQuantity": null,
-    "minQuantity": null,
-    "formattedValue": "$1,100.00"
-  },
-  "guid": null,
-  "managers": null,
-  "purchaseOrderNumber": null,
-  "status": null,
-  "b2bPermissionResults": null,
-  "statusDisplay": "Hold",
-  "code": "3747092",
-  "placed": 1398049200000
-}, {
-  "total": {
-    "currencyIso": "USD",
-    "priceType": "BUY",
-    "value": 1125.00,
-    "maxQuantity": null,
-    "minQuantity": null,
-    "formattedValue": "$1,125.00"
-  },
-  "guid": null,
-  "managers": null,
-  "purchaseOrderNumber": null,
-  "status": null,
-  "b2bPermissionResults": null,
-  "statusDisplay": "Hold",
-  "code": "3747116",
-  "placed": 1398135600000
-}, {
-  "total": {
-    "currencyIso": "USD",
-    "priceType": "BUY",
-    "value": 1025.00,
-    "maxQuantity": null,
-    "minQuantity": null,
-    "formattedValue": "$1,025.00"
-  },
-  "guid": null,
-  "managers": null,
-  "purchaseOrderNumber": null,
-  "status": null,
-  "b2bPermissionResults": null,
-  "statusDisplay": "Hold",
-  "code": "3747118",
-  "placed": 1398135600000
-}, {
-  "total": {
-    "currencyIso": "USD",
-    "priceType": "BUY",
-    "value": 1080.00,
-    "maxQuantity": null,
-    "minQuantity": null,
-    "formattedValue": "$1,080.00"
-  },
-  "guid": null,
-  "managers": null,
-  "purchaseOrderNumber": null,
-  "status": null,
-  "b2bPermissionResults": null,
-  "statusDisplay": "Hold",
-  "code": "3747093",
-  "placed": 1398049200000
-}, {
-  "total": {
-    "currencyIso": "USD",
-    "priceType": "BUY",
-    "value": 1050.00,
-    "maxQuantity": null,
-    "minQuantity": null,
-    "formattedValue": "$1,050.00"
-  },
-  "guid": null,
-  "managers": null,
-  "purchaseOrderNumber": null,
-  "status": null,
-  "b2bPermissionResults": null,
-  "statusDisplay": "Hold",
-  "code": "3747099",
-  "placed": 1398049200000
-}, {
-  "total": {
-    "currencyIso": "USD",
-    "priceType": "BUY",
-    "value": 1080.00,
-    "maxQuantity": null,
-    "minQuantity": null,
-    "formattedValue": "$1,080.00"
-  },
-  "guid": null,
-  "managers": null,
-  "purchaseOrderNumber": null,
-  "status": null,
-  "b2bPermissionResults": null,
-  "statusDisplay": "Hold",
-  "code": "3747090",
-  "placed": 1397790000000
-}, {
-  "total": {
-    "currencyIso": "USD",
-    "priceType": "BUY",
-    "value": 1135.00,
-    "maxQuantity": null,
-    "minQuantity": null,
-    "formattedValue": "$1,135.00"
-  },
-  "guid": null,
-  "managers": null,
-  "purchaseOrderNumber": null,
-  "status": null,
-  "b2bPermissionResults": null,
-  "statusDisplay": "Hold",
-  "code": "3747094",
-  "placed": 1398049200000
-}, {
-  "total": {
-    "currencyIso": "USD",
-    "priceType": "BUY",
-    "value": 975.00,
-    "maxQuantity": null,
-    "minQuantity": null,
-    "formattedValue": "$975.00"
-  },
-  "guid": null,
-  "managers": null,
-  "purchaseOrderNumber": null,
-  "status": null,
-  "b2bPermissionResults": null,
-  "statusDisplay": "Hold",
-  "code": "3747119",
-  "placed": 1398135600000
-}, {
-  "total": {
-    "currencyIso": "USD",
-    "priceType": "BUY",
-    "value": 150.00,
-    "maxQuantity": null,
-    "minQuantity": null,
-    "formattedValue": "$150.00"
-  },
-  "guid": null,
-  "managers": null,
-  "purchaseOrderNumber": null,
-  "status": null,
-  "b2bPermissionResults": null,
-  "statusDisplay": "Hold",
-  "code": "3747095",
-  "placed": 1398049200000
-}, {
-  "total": {
-    "currencyIso": "USD",
-    "priceType": "BUY",
-    "value": 975.00,
-    "maxQuantity": null,
-    "minQuantity": null,
-    "formattedValue": "$975.00"
-  },
-  "guid": null,
-  "managers": null,
-  "purchaseOrderNumber": null,
-  "status": null,
-  "b2bPermissionResults": null,
-  "statusDisplay": "Hold",
-  "code": "3747102",
-  "placed": 1398049200000
-}, {
-  "total": {
-    "currencyIso": "USD",
-    "priceType": "BUY",
-    "value": 1067.85,
-    "maxQuantity": null,
-    "minQuantity": null,
-    "formattedValue": "$1,067.85"
-  },
-  "guid": null,
-  "managers": null,
-  "purchaseOrderNumber": null,
-  "status": null,
-  "b2bPermissionResults": null,
-  "statusDisplay": "Hold",
-  "code": "3747170",
-  "placed": 1400727600000
-}, {
-  "total": {
-    "currencyIso": "USD",
-    "priceType": "BUY",
-    "value": 1067.85,
-    "maxQuantity": null,
-    "minQuantity": null,
-    "formattedValue": "$1,067.85"
-  },
-  "guid": null,
-  "managers": null,
-  "purchaseOrderNumber": null,
-  "status": null,
-  "b2bPermissionResults": null,
-  "statusDisplay": "Hold",
-  "code": "3747174",
-  "placed": 1401073200000
-}, {
-  "total": {
-    "currencyIso": "USD",
-    "priceType": "BUY",
-    "value": 980.00,
-    "maxQuantity": null,
-    "minQuantity": null,
-    "formattedValue": "$980.00"
-  },
-  "guid": null,
-  "managers": null,
-  "purchaseOrderNumber": null,
-  "status": null,
-  "b2bPermissionResults": null,
-  "statusDisplay": "Hold",
-  "code": "3747104",
-  "placed": 1398049200000
-}, {
-  "total": {
-    "currencyIso": "USD",
-    "priceType": "BUY",
-    "value": 1091.90,
-    "maxQuantity": null,
-    "minQuantity": null,
-    "formattedValue": "$1,091.90"
-  },
-  "guid": null,
-  "managers": null,
-  "purchaseOrderNumber": null,
-  "status": null,
-  "b2bPermissionResults": null,
-  "statusDisplay": "Hold",
-  "code": "3747260",
-  "placed": 1404788400000
-}, {
-  "total": {
-    "currencyIso": "USD",
-    "priceType": "BUY",
-    "value": 1067.85,
-    "maxQuantity": null,
-    "minQuantity": null,
-    "formattedValue": "$1,067.85"
-  },
-  "guid": null,
-  "managers": null,
-  "purchaseOrderNumber": null,
-  "status": null,
-  "b2bPermissionResults": null,
-  "statusDisplay": "Hold",
-  "code": "3747171",
-  "placed": 1400727600000
-}, {
-  "total": {
-    "currencyIso": "USD",
-    "priceType": "BUY",
-    "value": 1100.00,
-    "maxQuantity": null,
-    "minQuantity": null,
-    "formattedValue": "$1,100.00"
-  },
-  "guid": null,
-  "managers": null,
-  "purchaseOrderNumber": null,
-  "status": null,
-  "b2bPermissionResults": null,
-  "statusDisplay": "Hold",
-  "code": "3747086",
-  "placed": 1397790000000
-}, {
-  "total": {
-    "currencyIso": "USD",
-    "priceType": "BUY",
-    "value": 1092.85,
-    "maxQuantity": null,
-    "minQuantity": null,
-    "formattedValue": "$1,092.85"
-  },
-  "guid": null,
-  "managers": null,
-  "purchaseOrderNumber": null,
-  "status": null,
-  "b2bPermissionResults": null,
-  "statusDisplay": "Hold",
-  "code": "3747173",
-  "placed": 1401073200000
-}, {
-  "total": {
-    "currencyIso": "USD",
-    "priceType": "BUY",
-    "value": 1125.00,
-    "maxQuantity": null,
-    "minQuantity": null,
-    "formattedValue": "$1,125.00"
-  },
-  "guid": null,
-  "managers": null,
-  "purchaseOrderNumber": null,
-  "status": null,
-  "b2bPermissionResults": null,
-  "statusDisplay": "Hold",
-  "code": "3747084",
-  "placed": 1397790000000
-}, {
-  "total": {
-    "currencyIso": "USD",
-    "priceType": "BUY",
-    "value": 975.00,
-    "maxQuantity": null,
-    "minQuantity": null,
-    "formattedValue": "$975.00"
-  },
-  "guid": null,
-  "managers": null,
-  "purchaseOrderNumber": null,
-  "status": null,
-  "b2bPermissionResults": null,
-  "statusDisplay": "Hold",
-  "code": "3747106",
-  "placed": 1398049200000
-}, {
-  "total": {
-    "currencyIso": "USD",
-    "priceType": "BUY",
-    "value": 950.00,
-    "maxQuantity": null,
-    "minQuantity": null,
-    "formattedValue": "$950.00"
-  },
-  "guid": null,
-  "managers": null,
-  "purchaseOrderNumber": null,
-  "status": null,
-  "b2bPermissionResults": null,
-  "statusDisplay": "Hold",
-  "code": "3747122",
-  "placed": 1398135600000
-}, {
-  "total": {
-    "currencyIso": "USD",
-    "priceType": "BUY",
-    "value": 1025.00,
-    "maxQuantity": null,
-    "minQuantity": null,
-    "formattedValue": "$1,025.00"
-  },
-  "guid": null,
-  "managers": null,
-  "purchaseOrderNumber": null,
-  "status": null,
-  "b2bPermissionResults": null,
-  "statusDisplay": "Hold",
-  "code": "3747100",
-  "placed": 1398049200000
-}, {
-  "total": {
-    "currencyIso": "USD",
-    "priceType": "BUY",
-    "value": 75.00,
-    "maxQuantity": null,
-    "minQuantity": null,
-    "formattedValue": "$75.00"
-  },
-  "guid": null,
-  "managers": null,
-  "purchaseOrderNumber": null,
-  "status": null,
-  "b2bPermissionResults": null,
-  "statusDisplay": "Complete",
-  "code": "3747070",
-  "placed": 1394766000000
-}, {
-  "total": {
-    "currencyIso": "USD",
-    "priceType": "BUY",
-    "value": 1122.85,
-    "maxQuantity": null,
-    "minQuantity": null,
-    "formattedValue": "$1,122.85"
-  },
-  "guid": null,
-  "managers": null,
-  "purchaseOrderNumber": null,
-  "status": null,
-  "b2bPermissionResults": null,
-  "statusDisplay": "Hold",
-  "code": "3747164",
-  "placed": 1400727600000
-}, {
-  "total": {
-    "currencyIso": "USD",
-    "priceType": "BUY",
-    "value": 975.00,
-    "maxQuantity": null,
-    "minQuantity": null,
-    "formattedValue": "$975.00"
-  },
-  "guid": null,
-  "managers": null,
-  "purchaseOrderNumber": null,
-  "status": null,
-  "b2bPermissionResults": null,
-  "statusDisplay": "Hold",
-  "code": "3747107",
-  "placed": 1398049200000
-}, {
-  "total": {
-    "currencyIso": "USD",
-    "priceType": "BUY",
-    "value": 50.00,
-    "maxQuantity": null,
-    "minQuantity": null,
-    "formattedValue": "$50.00"
-  },
-  "guid": null,
-  "managers": null,
-  "purchaseOrderNumber": null,
-  "status": null,
-  "b2bPermissionResults": null,
-  "statusDisplay": "Hold",
-  "code": "3747083",
-  "placed": 1396580400000
-}, {
-  "total": {
-    "currencyIso": "USD",
-    "priceType": "BUY",
-    "value": 0.00,
-    "maxQuantity": null,
-    "minQuantity": null,
-    "formattedValue": "$0.00"
-  },
-  "guid": null,
-  "managers": null,
-  "purchaseOrderNumber": null,
-  "status": null,
-  "b2bPermissionResults": null,
-  "statusDisplay": "Hold",
-  "code": "3747081",
-  "placed": 1395975600000
-}, {
-  "total": {
-    "currencyIso": "USD",
-    "priceType": "BUY",
-    "value": 1075.00,
-    "maxQuantity": null,
-    "minQuantity": null,
-    "formattedValue": "$1,075.00"
-  },
-  "guid": null,
-  "managers": null,
-  "purchaseOrderNumber": null,
-  "status": null,
-  "b2bPermissionResults": null,
-  "statusDisplay": "Hold",
-  "code": "3747088",
-  "placed": 1397790000000
-}, {
-  "total": {
-    "currencyIso": "USD",
-    "priceType": "BUY",
-    "value": 1100.00,
-    "maxQuantity": null,
-    "minQuantity": null,
-    "formattedValue": "$1,100.00"
-  },
-  "guid": null,
-  "managers": null,
-  "purchaseOrderNumber": null,
-  "status": null,
-  "b2bPermissionResults": null,
-  "statusDisplay": "Hold",
-  "code": "3747091",
-  "placed": 1398049200000
-}, {
-  "total": {
-    "currencyIso": "USD",
-    "priceType": "BUY",
-    "value": 1315.45,
-    "maxQuantity": null,
-    "minQuantity": null,
-    "formattedValue": "$1,315.45"
-  },
-  "guid": null,
-  "managers": null,
-  "purchaseOrderNumber": null,
-  "status": null,
-  "b2bPermissionResults": null,
-  "statusDisplay": "Hold",
-  "code": "3747176",
-  "placed": 1401073200000
-}, {
-  "total": {
-    "currencyIso": "USD",
-    "priceType": "BUY",
-    "value": 1050.00,
-    "maxQuantity": null,
-    "minQuantity": null,
-    "formattedValue": "$1,050.00"
-  },
-  "guid": null,
-  "managers": null,
-  "purchaseOrderNumber": null,
-  "status": null,
-  "b2bPermissionResults": null,
-  "statusDisplay": "Hold",
-  "code": "3747103",
-  "placed": 1398049200000
-}, {
-  "total": {
-    "currencyIso": "USD",
-    "priceType": "BUY",
-    "value": 1136.90,
-    "maxQuantity": null,
-    "minQuantity": null,
-    "formattedValue": "$1,136.90"
-  },
-  "guid": null,
-  "managers": null,
-  "purchaseOrderNumber": null,
-  "status": null,
-  "b2bPermissionResults": null,
-  "statusDisplay": "Hold",
-  "code": "3747087",
-  "placed": 1397790000000
-}, {
-  "total": {
-    "currencyIso": "USD",
-    "priceType": "BUY",
-    "value": 1005.00,
-    "maxQuantity": null,
-    "minQuantity": null,
-    "formattedValue": "$1,005.00"
-  },
-  "guid": null,
-  "managers": null,
-  "purchaseOrderNumber": null,
-  "status": null,
-  "b2bPermissionResults": null,
-  "statusDisplay": "Hold",
-  "code": "3747101",
-  "placed": 1398049200000
-}, {
-  "total": {
-    "currencyIso": "USD",
-    "priceType": "BUY",
-    "value": 1050.00,
-    "maxQuantity": null,
-    "minQuantity": null,
-    "formattedValue": "$1,050.00"
-  },
-  "guid": null,
-  "managers": null,
-  "purchaseOrderNumber": null,
-  "status": null,
-  "b2bPermissionResults": null,
-  "statusDisplay": "Hold",
-  "code": "3747098",
-  "placed": 1398049200000
-}, {
-  "total": {
-    "currencyIso": "USD",
-    "priceType": "BUY",
-    "value": 975.00,
-    "maxQuantity": null,
-    "minQuantity": null,
-    "formattedValue": "$975.00"
-  },
-  "guid": null,
-  "managers": null,
-  "purchaseOrderNumber": null,
-  "status": null,
-  "b2bPermissionResults": null,
-  "statusDisplay": "Hold",
-  "code": "3747105",
-  "placed": 1398049200000
-}, {
-  "total": {
-    "currencyIso": "USD",
-    "priceType": "BUY",
-    "value": 1073.80,
-    "maxQuantity": null,
-    "minQuantity": null,
-    "formattedValue": "$1,073.80"
-  },
-  "guid": null,
-  "managers": null,
-  "purchaseOrderNumber": null,
-  "status": null,
-  "b2bPermissionResults": null,
-  "statusDisplay": "Hold",
-  "code": "3747165",
-  "placed": 1400727600000
-}, {
-  "total": {
-    "currencyIso": "USD",
-    "priceType": "BUY",
-    "value": 1067.85,
-    "maxQuantity": null,
-    "minQuantity": null,
-    "formattedValue": "$1,067.85"
-  },
-  "guid": null,
-  "managers": null,
-  "purchaseOrderNumber": null,
-  "status": null,
-  "b2bPermissionResults": null,
-  "statusDisplay": "Hold",
-  "code": "3747167",
-  "placed": 1400727600000
-}, {
-  "total": {
-    "currencyIso": "USD",
-    "priceType": "BUY",
-    "value": 1035.00,
-    "maxQuantity": null,
-    "minQuantity": null,
-    "formattedValue": "$1,035.00"
-  },
-  "guid": null,
-  "managers": null,
-  "purchaseOrderNumber": null,
-  "status": null,
-  "b2bPermissionResults": null,
-  "statusDisplay": "Hold",
-  "code": "3747125",
-  "placed": 1398135600000
-}, {
-  "total": {
-    "currencyIso": "USD",
-    "priceType": "BUY",
-    "value": 0.00,
-    "maxQuantity": null,
-    "minQuantity": null,
-    "formattedValue": "$0.00"
-  },
-  "guid": null,
-  "managers": null,
-  "purchaseOrderNumber": null,
-  "status": null,
-  "b2bPermissionResults": null,
-  "statusDisplay": "Hold",
-  "code": "3747082",
-  "placed": 1395975600000
-}, {
-  "total": {
-    "currencyIso": "USD",
-    "priceType": "BUY",
-    "value": 1125.00,
-    "maxQuantity": null,
-    "minQuantity": null,
-    "formattedValue": "$1,125.00"
-  },
-  "guid": null,
-  "managers": null,
-  "purchaseOrderNumber": null,
-  "status": null,
-  "b2bPermissionResults": null,
-  "statusDisplay": "Hold",
-  "code": "3747085",
-  "placed": 1397790000000
-}, {
-  "total": {
-    "currencyIso": "USD",
-    "priceType": "BUY",
-    "value": 1179.75,
-    "maxQuantity": null,
-    "minQuantity": null,
-    "formattedValue": "$1,179.75"
-  },
-  "guid": null,
-  "managers": null,
-  "purchaseOrderNumber": null,
-  "status": null,
-  "b2bPermissionResults": null,
-  "statusDisplay": "Hold",
-  "code": "3747168",
-  "placed": 1400727600000
-}, {
-  "total": {
-    "currencyIso": "USD",
-    "priceType": "BUY",
-    "value": 1067.85,
-    "maxQuantity": null,
-    "minQuantity": null,
-    "formattedValue": "$1,067.85"
-  },
-  "guid": null,
-  "managers": null,
-  "purchaseOrderNumber": null,
-  "status": null,
-  "b2bPermissionResults": null,
-  "statusDisplay": "Hold",
-  "code": "3747172",
-  "placed": 1401073200000
-}, {
-  "total": {
-    "currencyIso": "USD",
-    "priceType": "BUY",
-    "value": 950.00,
-    "maxQuantity": null,
-    "minQuantity": null,
-    "formattedValue": "$950.00"
-  },
-  "guid": null,
-  "managers": null,
-  "purchaseOrderNumber": null,
-  "status": null,
-  "b2bPermissionResults": null,
-  "statusDisplay": "Hold",
-  "code": "3747123",
-  "placed": 1398135600000
-}, {
-  "total": {
-    "currencyIso": "USD",
-    "priceType": "BUY",
-    "value": 950.00,
-    "maxQuantity": null,
-    "minQuantity": null,
-    "formattedValue": "$950.00"
-  },
-  "guid": null,
-  "managers": null,
-  "purchaseOrderNumber": null,
-  "status": null,
-  "b2bPermissionResults": null,
-  "statusDisplay": "Hold",
-  "code": "3747108",
-  "placed": 1398049200000
-}, {
-  "total": {
-    "currencyIso": "USD",
-    "priceType": "BUY",
-    "value": 1050.00,
-    "maxQuantity": null,
-    "minQuantity": null,
-    "formattedValue": "$1,050.00"
-  },
-  "guid": null,
-  "managers": null,
-  "purchaseOrderNumber": null,
-  "status": null,
-  "b2bPermissionResults": null,
-  "statusDisplay": "Hold",
-  "code": "3747117",
-  "placed": 1398135600000
-}, {
-  "total": {
-    "currencyIso": "USD",
-    "priceType": "BUY",
-    "value": 1030.00,
-    "maxQuantity": null,
-    "minQuantity": null,
-    "formattedValue": "$1,030.00"
-  },
-  "guid": null,
-  "managers": null,
-  "purchaseOrderNumber": null,
-  "status": null,
-  "b2bPermissionResults": null,
-  "statusDisplay": "Hold",
-  "code": "3747124",
-  "placed": 1398135600000
-}, {
-  "total": {
-    "currencyIso": "USD",
-    "priceType": "BUY",
-    "value": 1475.00,
-    "maxQuantity": null,
-    "minQuantity": null,
-    "formattedValue": "$1,475.00"
-  },
-  "guid": null,
-  "managers": null,
-  "purchaseOrderNumber": null,
-  "status": null,
-  "b2bPermissionResults": null,
-  "statusDisplay": "Hold",
-  "code": "3747121",
-  "placed": 1398135600000
-}, {
-  "total": {
-    "currencyIso": "USD",
-    "priceType": "BUY",
-    "value": 975.00,
-    "maxQuantity": null,
-    "minQuantity": null,
-    "formattedValue": "$975.00"
-  },
-  "guid": null,
-  "managers": null,
-  "purchaseOrderNumber": null,
-  "status": null,
-  "b2bPermissionResults": null,
-  "statusDisplay": "Hold",
-  "code": "3747120",
-  "placed": 1398135600000
-}, {
-  "total": {
-    "currencyIso": "USD",
-    "priceType": "BUY",
-    "value": 1067.85,
-    "maxQuantity": null,
-    "minQuantity": null,
-    "formattedValue": "$1,067.85"
-  },
-  "guid": null,
-  "managers": null,
-  "purchaseOrderNumber": null,
-  "status": null,
-  "b2bPermissionResults": null,
-  "statusDisplay": "Hold",
-  "code": "3747169",
-  "placed": 1400727600000
-}, {
-  "total": {
-    "currencyIso": "USD",
-    "priceType": "BUY",
-    "value": 1067.85,
-    "maxQuantity": null,
-    "minQuantity": null,
-    "formattedValue": "$1,067.85"
-  },
-  "guid": null,
-  "managers": null,
-  "purchaseOrderNumber": null,
-  "status": null,
-  "b2bPermissionResults": null,
-  "statusDisplay": "Hold",
-  "code": "3747175",
-  "placed": 1401073200000
-}, {
-  "total": {
-    "currencyIso": "USD",
-    "priceType": "BUY",
-    "value": 1067.85,
-    "maxQuantity": null,
-    "minQuantity": null,
-    "formattedValue": "$1,067.85"
-  },
-  "guid": null,
-  "managers": null,
-  "purchaseOrderNumber": null,
-  "status": null,
-  "b2bPermissionResults": null,
-  "statusDisplay": "Hold",
-  "code": "3747166",
-  "placed": 1400727600000
-}, {
-  "total": {
-    "currencyIso": "USD",
-    "priceType": "BUY",
-    "value": 5.95,
-    "maxQuantity": null,
-    "minQuantity": null,
-    "formattedValue": "$5.95"
-  },
-  "guid": null,
-  "managers": null,
-  "purchaseOrderNumber": null,
-  "status": null,
-  "b2bPermissionResults": null,
-  "statusDisplay": "Complete",
-  "code": "3747349",
-  "placed": 1410145200000
-}, {
-  "total": {
-    "currencyIso": "USD",
-    "priceType": "BUY",
-    "value": 59.50,
-    "maxQuantity": null,
-    "minQuantity": null,
-    "formattedValue": "$59.50"
-  },
-  "guid": null,
-  "managers": null,
-  "purchaseOrderNumber": null,
-  "status": null,
-  "b2bPermissionResults": null,
-  "statusDisplay": "Complete",
-  "code": "3747352",
-  "placed": 1410145200000
-}, {
-  "total": {
-    "currencyIso": "USD",
-    "priceType": "BUY",
-    "value": 1125.00,
-    "maxQuantity": null,
-    "minQuantity": null,
-    "formattedValue": "$1,125.00"
-  },
-  "guid": null,
-  "managers": null,
-  "purchaseOrderNumber": null,
-  "status": null,
-  "b2bPermissionResults": null,
-  "statusDisplay": "Complete",
-  "code": "3746995",
-  "placed": 1392260400000
-}, {
-  "total": {
-    "currencyIso": "USD",
-    "priceType": "BUY",
-    "value": 50.00,
-    "maxQuantity": null,
-    "minQuantity": null,
-    "formattedValue": "$50.00"
-  },
-  "guid": null,
-  "managers": null,
-  "purchaseOrderNumber": null,
-  "status": null,
-  "b2bPermissionResults": null,
-  "statusDisplay": "Complete",
-  "code": "3746996",
-  "placed": 1392260400000
-}, {
-  "total": {
-    "currencyIso": "USD",
-    "priceType": "BUY",
-    "value": 0.00,
-    "maxQuantity": null,
-    "minQuantity": null,
-    "formattedValue": "$0.00"
-  },
-  "guid": null,
-  "managers": null,
-  "purchaseOrderNumber": null,
-  "status": null,
-  "b2bPermissionResults": null,
-  "statusDisplay": "Hold",
-  "code": "3747016",
-  "placed": 1392606000000
-}, {
-  "total": {
-    "currencyIso": "USD",
-    "priceType": "BUY",
-    "value": 61.90,
-    "maxQuantity": null,
-    "minQuantity": null,
-    "formattedValue": "$61.90"
-  },
-  "guid": null,
-  "managers": null,
-  "purchaseOrderNumber": null,
-  "status": null,
-  "b2bPermissionResults": null,
-  "statusDisplay": "Valid",
-  "code": "3746998",
-  "placed": 1392260400000
-}, {
-  "total": {
-    "currencyIso": "USD",
-    "priceType": "BUY",
-    "value": 3125.00,
-    "maxQuantity": null,
-    "minQuantity": null,
-    "formattedValue": "$3,125.00"
-  },
-  "guid": null,
-  "managers": null,
-  "purchaseOrderNumber": null,
-  "status": null,
-  "b2bPermissionResults": null,
-  "statusDisplay": "Hold",
-  "code": "3746993",
-  "placed": 1391569200000
-}, {
-  "total": {
-    "currencyIso": "USD",
-    "priceType": "BUY",
-    "value": 130.95,
-    "maxQuantity": null,
-    "minQuantity": null,
-    "formattedValue": "$130.95"
-  },
-  "guid": null,
-  "managers": null,
-  "purchaseOrderNumber": null,
-  "status": null,
-  "b2bPermissionResults": null,
-  "statusDisplay": "Hold",
-  "code": "3746994",
-  "placed": 1392174000000
-}, {
-  "total": {
-    "currencyIso": "USD",
-    "priceType": "BUY",
-    "value": 0.00,
-    "maxQuantity": null,
-    "minQuantity": null,
-    "formattedValue": "$0.00"
-  },
-  "guid": null,
-  "managers": null,
-  "purchaseOrderNumber": null,
-  "status": null,
-  "b2bPermissionResults": null,
-  "statusDisplay": "Hold",
-  "code": "3747015",
-  "placed": 1392606000000
-}, {
-  "total": {
-    "currencyIso": "USD",
-    "priceType": "BUY",
-    "value": 0.00,
-    "maxQuantity": null,
-    "minQuantity": null,
-    "formattedValue": "$0.00"
-  },
-  "guid": null,
-  "managers": null,
-  "purchaseOrderNumber": null,
-  "status": null,
-  "b2bPermissionResults": null,
-  "statusDisplay": "Hold",
-  "code": "3747043",
-  "placed": 1392606000000
-}, {
-  "total": {
-    "currencyIso": "USD",
-    "priceType": "BUY",
-    "value": 0.00,
-    "maxQuantity": null,
-    "minQuantity": null,
-    "formattedValue": "$0.00"
-  },
-  "guid": null,
-  "managers": null,
-  "purchaseOrderNumber": null,
-  "status": null,
-  "b2bPermissionResults": null,
-  "statusDisplay": "Complete",
-  "code": "3747044",
-  "placed": 1392692400000
-}, {
-  "total": {
-    "currencyIso": "USD",
-    "priceType": "BUY",
-    "value": 0.00,
-    "maxQuantity": null,
-    "minQuantity": null,
-    "formattedValue": "$0.00"
-  },
-  "guid": null,
-  "managers": null,
-  "purchaseOrderNumber": null,
-  "status": null,
-  "b2bPermissionResults": null,
-  "statusDisplay": "Hold",
-  "code": "3747014",
-  "placed": 1392606000000
-}, {
-  "total": {
-    "currencyIso": "USD",
-    "priceType": "BUY",
-    "value": 20.00,
-    "maxQuantity": null,
-    "minQuantity": null,
-    "formattedValue": "$20.00"
-  },
-  "guid": null,
-  "managers": null,
-  "purchaseOrderNumber": null,
-  "status": null,
-  "b2bPermissionResults": null,
-  "statusDisplay": "Hold",
-  "code": "3747017",
-  "placed": 1392606000000
-}, {
-  "total": {
-    "currencyIso": "USD",
-    "priceType": "BUY",
-    "value": 50.00,
-    "maxQuantity": null,
-    "minQuantity": null,
-    "formattedValue": "$50.00"
-  },
-  "guid": null,
-  "managers": null,
-  "purchaseOrderNumber": null,
-  "status": null,
-  "b2bPermissionResults": null,
-  "statusDisplay": "Complete",
-  "code": "3747045",
-  "placed": 1392692400000
-}, {
-  "total": {
-    "currencyIso": "USD",
-    "priceType": "BUY",
-    "value": 75.00,
-    "maxQuantity": null,
-    "minQuantity": null,
-    "formattedValue": "$75.00"
-  },
-  "guid": null,
-  "managers": null,
-  "purchaseOrderNumber": null,
-  "status": null,
-  "b2bPermissionResults": null,
-  "statusDisplay": "Complete",
-  "code": "3747046",
-  "placed": 1392692400000
-}, {
-  "total": {
-    "currencyIso": "USD",
-    "priceType": "BUY",
-    "value": 50.00,
-    "maxQuantity": null,
-    "minQuantity": null,
-    "formattedValue": "$50.00"
-  },
-  "guid": null,
-  "managers": null,
-  "purchaseOrderNumber": null,
-  "status": null,
-  "b2bPermissionResults": null,
-  "statusDisplay": "Hold",
-  "code": "3747054",
-  "placed": 1393470000000
-}, {
-  "total": {
-    "currencyIso": "USD",
-    "priceType": "BUY",
-    "value": 1541.09,
-    "maxQuantity": null,
-    "minQuantity": null,
-    "formattedValue": "$1,541.09"
-  },
-  "guid": null,
-  "managers": null,
-  "purchaseOrderNumber": null,
-  "status": null,
-  "b2bPermissionResults": null,
-  "statusDisplay": "Hold",
-  "code": "3746952",
-  "placed": 1384484400000
-}]
\ No newline at end of file
+[
+  {
+    "total": {
+      "currencyIso": "USD",
+      "priceType": "BUY",
+      "value": 6100.00,
+      "formattedValue": "$6,100.00"
+    },
+    "statusDisplay": "Valid",
+    "code": "3747453",
+    "placed": 1417402800000
+  },
+  {
+    "total": {
+      "currencyIso": "USD",
+      "priceType": "BUY",
+      "value": 1100.00,
+      "formattedValue": "$1,100.00"
+    },
+    "statusDisplay": "Hold",
+    "code": "3747092",
+    "placed": 1398049200000
+  },
+  {
+    "total": {
+      "currencyIso": "USD",
+      "priceType": "BUY",
+      "value": 1125.00,
+      "formattedValue": "$1,125.00"
+    },
+    "statusDisplay": "Hold",
+    "code": "3747116",
+    "placed": 1398135600000
+  },
+  {
+    "total": {
+      "currencyIso": "USD",
+      "priceType": "BUY",
+      "value": 1025.00,
+      "formattedValue": "$1,025.00"
+    },
+    "statusDisplay": "Hold",
+    "code": "3747118",
+    "placed": 1398135600000
+  },
+  {
+    "total": {
+      "currencyIso": "USD",
+      "priceType": "BUY",
+      "value": 1080.00,
+      "formattedValue": "$1,080.00"
+    },
+    "statusDisplay": "Hold",
+    "code": "3747093",
+    "placed": 1398049200000
+  },
+  {
+    "total": {
+      "currencyIso": "USD",
+      "priceType": "BUY",
+      "value": 1050.00,
+      "formattedValue": "$1,050.00"
+    },
+    "statusDisplay": "Hold",
+    "code": "3747099",
+    "placed": 1398049200000
+  },
+  {
+    "total": {
+      "currencyIso": "USD",
+      "priceType": "BUY",
+      "value": 1080.00,
+      "formattedValue": "$1,080.00"
+    },
+    "statusDisplay": "Hold",
+    "code": "3747090",
+    "placed": 1397790000000
+  },
+  {
+    "total": {
+      "currencyIso": "USD",
+      "priceType": "BUY",
+      "value": 1135.00,
+      "formattedValue": "$1,135.00"
+    },
+    "statusDisplay": "Hold",
+    "code": "3747094",
+    "placed": 1398049200000
+  },
+  {
+    "total": {
+      "currencyIso": "USD",
+      "priceType": "BUY",
+      "value": 975.00,
+      "formattedValue": "$975.00"
+    },
+    "statusDisplay": "Hold",
+    "code": "3747119",
+    "placed": 1398135600000
+  },
+  {
+    "total": {
+      "currencyIso": "USD",
+      "priceType": "BUY",
+      "value": 150.00,
+      "formattedValue": "$150.00"
+    },
+    "statusDisplay": "Hold",
+    "code": "3747095",
+    "placed": 1398049200000
+  },
+  {
+    "total": {
+      "currencyIso": "USD",
+      "priceType": "BUY",
+      "value": 975.00,
+      "formattedValue": "$975.00"
+    },
+    "statusDisplay": "Hold",
+    "code": "3747102",
+    "placed": 1398049200000
+  },
+  {
+    "total": {
+      "currencyIso": "USD",
+      "priceType": "BUY",
+      "value": 1067.85,
+      "formattedValue": "$1,067.85"
+    },
+    "statusDisplay": "Hold",
+    "code": "3747170",
+    "placed": 1400727600000
+  },
+  {
+    "total": {
+      "currencyIso": "USD",
+      "priceType": "BUY",
+      "value": 1067.85,
+      "formattedValue": "$1,067.85"
+    },
+    "statusDisplay": "Hold",
+    "code": "3747174",
+    "placed": 1401073200000
+  },
+  {
+    "total": {
+      "currencyIso": "USD",
+      "priceType": "BUY",
+      "value": 980.00,
+      "formattedValue": "$980.00"
+    },
+    "statusDisplay": "Hold",
+    "code": "3747104",
+    "placed": 1398049200000
+  },
+  {
+    "total": {
+      "currencyIso": "USD",
+      "priceType": "BUY",
+      "value": 1091.90,
+      "formattedValue": "$1,091.90"
+    },
+    "statusDisplay": "Hold",
+    "code": "3747260",
+    "placed": 1404788400000
+  },
+  {
+    "total": {
+      "currencyIso": "USD",
+      "priceType": "BUY",
+      "value": 1067.85,
+      "formattedValue": "$1,067.85"
+    },
+    "statusDisplay": "Hold",
+    "code": "3747171",
+    "placed": 1400727600000
+  },
+  {
+    "total": {
+      "currencyIso": "USD",
+      "priceType": "BUY",
+      "value": 1100.00,
+      "formattedValue": "$1,100.00"
+    },
+    "statusDisplay": "Hold",
+    "code": "3747086",
+    "placed": 1397790000000
+  },
+  {
+    "total": {
+      "currencyIso": "USD",
+      "priceType": "BUY",
+      "value": 1092.85,
+      "formattedValue": "$1,092.85"
+    },
+    "statusDisplay": "Hold",
+    "code": "3747173",
+    "placed": 1401073200000
+  },
+  {
+    "total": {
+      "currencyIso": "USD",
+      "priceType": "BUY",
+      "value": 1125.00,
+      "formattedValue": "$1,125.00"
+    },
+    "statusDisplay": "Hold",
+    "code": "3747084",
+    "placed": 1397790000000
+  },
+  {
+    "total": {
+      "currencyIso": "USD",
+      "priceType": "BUY",
+      "value": 975.00,
+      "formattedValue": "$975.00"
+    },
+    "statusDisplay": "Hold",
+    "code": "3747106",
+    "placed": 1398049200000
+  },
+  {
+    "total": {
+      "currencyIso": "USD",
+      "priceType": "BUY",
+      "value": 950.00,
+      "formattedValue": "$950.00"
+    },
+    "statusDisplay": "Hold",
+    "code": "3747122",
+    "placed": 1398135600000
+  },
+  {
+    "total": {
+      "currencyIso": "USD",
+      "priceType": "BUY",
+      "value": 1025.00,
+      "formattedValue": "$1,025.00"
+    },
+    "statusDisplay": "Hold",
+    "code": "3747100",
+    "placed": 1398049200000
+  },
+  {
+    "total": {
+      "currencyIso": "USD",
+      "priceType": "BUY",
+      "value": 75.00,
+      "formattedValue": "$75.00"
+    },
+    "statusDisplay": "Complete",
+    "code": "3747070",
+    "placed": 1394766000000
+  },
+  {
+    "total": {
+      "currencyIso": "USD",
+      "priceType": "BUY",
+      "value": 1122.85,
+      "formattedValue": "$1,122.85"
+    },
+    "statusDisplay": "Hold",
+    "code": "3747164",
+    "placed": 1400727600000
+  },
+  {
+    "total": {
+      "currencyIso": "USD",
+      "priceType": "BUY",
+      "value": 975.00,
+      "formattedValue": "$975.00"
+    },
+    "statusDisplay": "Hold",
+    "code": "3747107",
+    "placed": 1398049200000
+  },
+  {
+    "total": {
+      "currencyIso": "USD",
+      "priceType": "BUY",
+      "value": 50.00,
+      "formattedValue": "$50.00"
+    },
+    "statusDisplay": "Hold",
+    "code": "3747083",
+    "placed": 1396580400000
+  },
+  {
+    "total": {
+      "currencyIso": "USD",
+      "priceType": "BUY",
+      "value": 0.00,
+      "formattedValue": "$0.00"
+    },
+    "statusDisplay": "Hold",
+    "code": "3747081",
+    "placed": 1395975600000
+  },
+  {
+    "total": {
+      "currencyIso": "USD",
+      "priceType": "BUY",
+      "value": 1075.00,
+      "formattedValue": "$1,075.00"
+    },
+    "statusDisplay": "Hold",
+    "code": "3747088",
+    "placed": 1397790000000
+  },
+  {
+    "total": {
+      "currencyIso": "USD",
+      "priceType": "BUY",
+      "value": 1100.00,
+      "formattedValue": "$1,100.00"
+    },
+    "statusDisplay": "Hold",
+    "code": "3747091",
+    "placed": 1398049200000
+  },
+  {
+    "total": {
+      "currencyIso": "USD",
+      "priceType": "BUY",
+      "value": 1315.45,
+      "formattedValue": "$1,315.45"
+    },
+    "statusDisplay": "Hold",
+    "code": "3747176",
+    "placed": 1401073200000
+  },
+  {
+    "total": {
+      "currencyIso": "USD",
+      "priceType": "BUY",
+      "value": 1050.00,
+      "formattedValue": "$1,050.00"
+    },
+    "statusDisplay": "Hold",
+    "code": "3747103",
+    "placed": 1398049200000
+  },
+  {
+    "total": {
+      "currencyIso": "USD",
+      "priceType": "BUY",
+      "value": 1136.90,
+      "formattedValue": "$1,136.90"
+    },
+    "statusDisplay": "Hold",
+    "code": "3747087",
+    "placed": 1397790000000
+  },
+  {
+    "total": {
+      "currencyIso": "USD",
+      "priceType": "BUY",
+      "value": 1005.00,
+      "formattedValue": "$1,005.00"
+    },
+    "statusDisplay": "Hold",
+    "code": "3747101",
+    "placed": 1398049200000
+  },
+  {
+    "total": {
+      "currencyIso": "USD",
+      "priceType": "BUY",
+      "value": 1050.00,
+      "formattedValue": "$1,050.00"
+    },
+    "statusDisplay": "Hold",
+    "code": "3747098",
+    "placed": 1398049200000
+  },
+  {
+    "total": {
+      "currencyIso": "USD",
+      "priceType": "BUY",
+      "value": 975.00,
+      "formattedValue": "$975.00"
+    },
+    "statusDisplay": "Hold",
+    "code": "3747105",
+    "placed": 1398049200000
+  },
+  {
+    "total": {
+      "currencyIso": "USD",
+      "priceType": "BUY",
+      "value": 1073.80,
+      "formattedValue": "$1,073.80"
+    },
+    "statusDisplay": "Hold",
+    "code": "3747165",
+    "placed": 1400727600000
+  },
+  {
+    "total": {
+      "currencyIso": "USD",
+      "priceType": "BUY",
+      "value": 1067.85,
+      "formattedValue": "$1,067.85"
+    },
+    "statusDisplay": "Hold",
+    "code": "3747167",
+    "placed": 1400727600000
+  },
+  {
+    "total": {
+      "currencyIso": "USD",
+      "priceType": "BUY",
+      "value": 1035.00,
+      "formattedValue": "$1,035.00"
+    },
+    "statusDisplay": "Hold",
+    "code": "3747125",
+    "placed": 1398135600000
+  },
+  {
+    "total": {
+      "currencyIso": "USD",
+      "priceType": "BUY",
+      "value": 0.00,
+      "formattedValue": "$0.00"
+    },
+    "statusDisplay": "Hold",
+    "code": "3747082",
+    "placed": 1395975600000
+  },
+  {
+    "total": {
+      "currencyIso": "USD",
+      "priceType": "BUY",
+      "value": 1125.00,
+      "formattedValue": "$1,125.00"
+    },
+    "statusDisplay": "Hold",
+    "code": "3747085",
+    "placed": 1397790000000
+  },
+  {
+    "total": {
+      "currencyIso": "USD",
+      "priceType": "BUY",
+      "value": 1179.75,
+      "formattedValue": "$1,179.75"
+    },
+    "statusDisplay": "Hold",
+    "code": "3747168",
+    "placed": 1400727600000
+  },
+  {
+    "total": {
+      "currencyIso": "USD",
+      "priceType": "BUY",
+      "value": 1067.85,
+      "formattedValue": "$1,067.85"
+    },
+    "statusDisplay": "Hold",
+    "code": "3747172",
+    "placed": 1401073200000
+  },
+  {
+    "total": {
+      "currencyIso": "USD",
+      "priceType": "BUY",
+      "value": 950.00,
+      "formattedValue": "$950.00"
+    },
+    "statusDisplay": "Hold",
+    "code": "3747123",
+    "placed": 1398135600000
+  },
+  {
+    "total": {
+      "currencyIso": "USD",
+      "priceType": "BUY",
+      "value": 950.00,
+      "formattedValue": "$950.00"
+    },
+    "statusDisplay": "Hold",
+    "code": "3747108",
+    "placed": 1398049200000
+  },
+  {
+    "total": {
+      "currencyIso": "USD",
+      "priceType": "BUY",
+      "value": 1050.00,
+      "formattedValue": "$1,050.00"
+    },
+    "statusDisplay": "Hold",
+    "code": "3747117",
+    "placed": 1398135600000
+  },
+  {
+    "total": {
+      "currencyIso": "USD",
+      "priceType": "BUY",
+      "value": 1030.00,
+      "formattedValue": "$1,030.00"
+    },
+    "statusDisplay": "Hold",
+    "code": "3747124",
+    "placed": 1398135600000
+  },
+  {
+    "total": {
+      "currencyIso": "USD",
+      "priceType": "BUY",
+      "value": 1475.00,
+      "formattedValue": "$1,475.00"
+    },
+    "statusDisplay": "Hold",
+    "code": "3747121",
+    "placed": 1398135600000
+  },
+  {
+    "total": {
+      "currencyIso": "USD",
+      "priceType": "BUY",
+      "value": 975.00,
+      "formattedValue": "$975.00"
+    },
+    "statusDisplay": "Hold",
+    "code": "3747120",
+    "placed": 1398135600000
+  },
+  {
+    "total": {
+      "currencyIso": "USD",
+      "priceType": "BUY",
+      "value": 1067.85,
+      "formattedValue": "$1,067.85"
+    },
+    "statusDisplay": "Hold",
+    "code": "3747169",
+    "placed": 1400727600000
+  },
+  {
+    "total": {
+      "currencyIso": "USD",
+      "priceType": "BUY",
+      "value": 1067.85,
+      "formattedValue": "$1,067.85"
+    },
+    "statusDisplay": "Hold",
+    "code": "3747175",
+    "placed": 1401073200000
+  },
+  {
+    "total": {
+      "currencyIso": "USD",
+      "priceType": "BUY",
+      "value": 1067.85,
+      "formattedValue": "$1,067.85"
+    },
+    "statusDisplay": "Hold",
+    "code": "3747166",
+    "placed": 1400727600000
+  },
+  {
+    "total": {
+      "currencyIso": "USD",
+      "priceType": "BUY",
+      "value": 5.95,
+      "formattedValue": "$5.95"
+    },
+    "statusDisplay": "Complete",
+    "code": "3747349",
+    "placed": 1410145200000
+  },
+  {
+    "total": {
+      "currencyIso": "USD",
+      "priceType": "BUY",
+      "value": 59.50,
+      "formattedValue": "$59.50"
+    },
+    "statusDisplay": "Complete",
+    "code": "3747352",
+    "placed": 1410145200000
+  },
+  {
+    "total": {
+      "currencyIso": "USD",
+      "priceType": "BUY",
+      "value": 1125.00,
+      "formattedValue": "$1,125.00"
+    },
+    "statusDisplay": "Complete",
+    "code": "3746995",
+    "placed": 1392260400000
+  },
+  {
+    "total": {
+      "currencyIso": "USD",
+      "priceType": "BUY",
+      "value": 50.00,
+      "formattedValue": "$50.00"
+    },
+    "statusDisplay": "Complete",
+    "code": "3746996",
+    "placed": 1392260400000
+  },
+  {
+    "total": {
+      "currencyIso": "USD",
+      "priceType": "BUY",
+      "value": 0.00,
+      "formattedValue": "$0.00"
+    },
+    "statusDisplay": "Hold",
+    "code": "3747016",
+    "placed": 1392606000000
+  },
+  {
+    "total": {
+      "currencyIso": "USD",
+      "priceType": "BUY",
+      "value": 61.90,
+      "formattedValue": "$61.90"
+    },
+    "statusDisplay": "Valid",
+    "code": "3746998",
+    "placed": 1392260400000
+  },
+  {
+    "total": {
+      "currencyIso": "USD",
+      "priceType": "BUY",
+      "value": 3125.00,
+      "formattedValue": "$3,125.00"
+    },
+    "statusDisplay": "Hold",
+    "code": "3746993",
+    "placed": 1391569200000
+  },
+  {
+    "total": {
+      "currencyIso": "USD",
+      "priceType": "BUY",
+      "value": 130.95,
+      "formattedValue": "$130.95"
+    },
+    "statusDisplay": "Hold",
+    "code": "3746994",
+    "placed": 1392174000000
+  },
+  {
+    "total": {
+      "currencyIso": "USD",
+      "priceType": "BUY",
+      "value": 0.00,
+      "formattedValue": "$0.00"
+    },
+    "statusDisplay": "Hold",
+    "code": "3747015",
+    "placed": 1392606000000
+  },
+  {
+    "total": {
+      "currencyIso": "USD",
+      "priceType": "BUY",
+      "value": 0.00,
+      "formattedValue": "$0.00"
+    },
+    "statusDisplay": "Hold",
+    "code": "3747043",
+    "placed": 1392606000000
+  },
+  {
+    "total": {
+      "currencyIso": "USD",
+      "priceType": "BUY",
+      "value": 0.00,
+      "formattedValue": "$0.00"
+    },
+    "statusDisplay": "Complete",
+    "code": "3747044",
+    "placed": 1392692400000
+  },
+  {
+    "total": {
+      "currencyIso": "USD",
+      "priceType": "BUY",
+      "value": 0.00,
+      "formattedValue": "$0.00"
+    },
+    "statusDisplay": "Hold",
+    "code": "3747014",
+    "placed": 1392606000000
+  },
+  {
+    "total": {
+      "currencyIso": "USD",
+      "priceType": "BUY",
+      "value": 20.00,
+      "formattedValue": "$20.00"
+    },
+    "statusDisplay": "Hold",
+    "code": "3747017",
+    "placed": 1392606000000
+  },
+  {
+    "total": {
+      "currencyIso": "USD",
+      "priceType": "BUY",
+      "value": 50.00,
+      "formattedValue": "$50.00"
+    },
+    "statusDisplay": "Complete",
+    "code": "3747045",
+    "placed": 1392692400000
+  },
+  {
+    "total": {
+      "currencyIso": "USD",
+      "priceType": "BUY",
+      "value": 75.00,
+      "formattedValue": "$75.00"
+    },
+    "statusDisplay": "Complete",
+    "code": "3747046",
+    "placed": 1392692400000
+  },
+  {
+    "total": {
+      "currencyIso": "USD",
+      "priceType": "BUY",
+      "value": 50.00,
+      "formattedValue": "$50.00"
+    },
+    "statusDisplay": "Hold",
+    "code": "3747054",
+    "placed": 1393470000000
+  },
+  {
+    "total": {
+      "currencyIso": "USD",
+      "priceType": "BUY",
+      "value": 1541.09,
+      "formattedValue": "$1,541.09"
+    },
+    "statusDisplay": "Hold",
+    "code": "3746952",
+    "placed": 1384484400000
+  }
+]
\ No newline at end of file
diff --git a/dist/JSONToCSVConvertor.js b/dist/JSONToCSVConvertor.js
new file mode 100644
index 0000000..3fce1b6
--- /dev/null
+++ b/dist/JSONToCSVConvertor.js
@@ -0,0 +1,84 @@
+function JSONToCSVConvertor(JSONData, ReportTitle, ShowLabel) {
+    //If JSONData is not an object then JSON.parse will parse the JSON string in an Object
+    var arrData = typeof JSONData != 'object' ? JSON.parse(JSONData) : JSONData;
+
+    var CSV = '';
+    //Set Report title in first row or line
+
+    CSV += ReportTitle + '\r\n\n';
+
+    var currentDate = new Date();
+
+    CSV += currentDate + '\r\n\n';
+
+    //This condition will generate the Label/Header
+    if (ShowLabel) {
+        var row = "";
+
+        //This loop will extract the label from 1st index of on array
+        for (var index in arrData[0]) {
+
+            //Now convert each value to string and comma-seprated
+            row += index + ',';
+        }
+
+        row = row.slice(0, -1);
+
+        //append Label row with line break
+        CSV += row + '\r\n';
+    }
+
+    //1st loop is to extract each row
+    for (var i = 0; i < arrData.length; i++) {
+        var row = "";
+
+        //2nd loop will extract each column and convert it in string comma-seprated
+        for (var index in arrData[i]) {
+            row += '"' + arrData[i][index] + '",';
+        }
+
+        row.slice(0, row.length - 1);
+
+        //add a line break after each row
+        CSV += row + '\r\n';
+    }
+
+    if (CSV == '') {
+        alert("Invalid data");
+        return;
+    }
+
+    //Generate a file name
+    var fileName = "";
+    //this will remove the blank-spaces from the title and replace it with an underscore
+    fileName += ReportTitle.replace(/ /g, "_");
+
+    //Initialize file format you want csv or xls
+    var uri = 'data:text/csv;charset=utf-8,' + escape(CSV);
+
+    // Now the little tricky part.
+    // you can use either>> window.open(uri);
+    // but this will not work in some browsers
+    // or you will not get the correct file extension
+
+    //this trick will generate a temp <a /> tag
+
+    if (navigator.msSaveBlob) {
+        uri = 'data:text/csv;charset=utf-8,' + CSV;
+        navigator.msSaveBlob(new Blob([uri], {type: 'text/csv;charset=utf-8;'}), fileName + ".csv");
+    }
+
+    else {
+        var link = document.createElement("a");
+        link.href = uri;
+
+        //set the visibility hidden so it will not effect on your web-layout
+        link.style = "visibility:hidden";
+        link.download = fileName + ".csv";
+
+        //this part will append the anchor tag and remove it after automatic click
+        document.body.appendChild(link);
+        link.click();
+        document.body.removeChild(link);
+    }
+}
\ No newline at end of file
diff --git a/src/js/vendors/JSONToCSVConvertor.js b/src/js/vendors/JSONToCSVConvertor.js
new file mode 100644
index 0000000..3fce1b6
--- /dev/null
+++ b/src/js/vendors/JSONToCSVConvertor.js
@@ -0,0 +1,84 @@
+function JSONToCSVConvertor(JSONData, ReportTitle, ShowLabel) {
+    //If JSONData is not an object then JSON.parse will parse the JSON string in an Object
+    var arrData = typeof JSONData != 'object' ? JSON.parse(JSONData) : JSONData;
+
+    var CSV = '';
+    //Set Report title in first row or line
+
+    CSV += ReportTitle + '\r\n\n';
+
+    var currentDate = new Date();
+
+    CSV += currentDate + '\r\n\n';
+
+    //This condition will generate the Label/Header
+    if (ShowLabel) {
+        var row = "";
+
+        //This loop will extract the label from 1st index of on array
+        for (var index in arrData[0]) {
+
+            //Now convert each value to string and comma-seprated
+            row += index + ',';
+        }
+
+        row = row.slice(0, -1);
+
+        //append Label row with line break
+        CSV += row + '\r\n';
+    }
+
+    //1st loop is to extract each row
+    for (var i = 0; i < arrData.length; i++) {
+        var row = "";
+
+        //2nd loop will extract each column and convert it in string comma-seprated
+        for (var index in arrData[i]) {
+            row += '"' + arrData[i][index] + '",';
+        }
+
+        row.slice(0, row.length - 1);
+
+        //add a line break after each row
+        CSV += row + '\r\n';
+    }
+
+    if (CSV == '') {
+        alert("Invalid data");
+        return;
+    }
+
+    //Generate a file name
+    var fileName = "";
+    //this will remove the blank-spaces from the title and replace it with an underscore
+    fileName += ReportTitle.replace(/ /g, "_");
+
+    //Initialize file format you want csv or xls
+    var uri = 'data:text/csv;charset=utf-8,' + escape(CSV);
+
+    // Now the little tricky part.
+    // you can use either>> window.open(uri);
+    // but this will not work in some browsers
+    // or you will not get the correct file extension
+
+    //this trick will generate a temp <a /> tag
+
+    if (navigator.msSaveBlob) {
+        uri = 'data:text/csv;charset=utf-8,' + CSV;
+        navigator.msSaveBlob(new Blob([uri], {type: 'text/csv;charset=utf-8;'}), fileName + ".csv");
+    }
+
+    else {
+        var link = document.createElement("a");
+        link.href = uri;
+
+        //set the visibility hidden so it will not effect on your web-layout
+        link.style = "visibility:hidden";
+        link.download = fileName + ".csv";
+
+        //this part will append the anchor tag and remove it after automatic click
+        document.body.appendChild(link);
+        link.click();
+        document.body.removeChild(link);
+    }
+}
\ No newline at end of file

From 1b69629265629b80482df750a3cc25ea03235a0e Mon Sep 17 00:00:00 2001
From: Alexander Zhuk <AZhuk@lifetimefitness.com>
Date: Thu, 17 Aug 2017 15:34:39 +0300
Subject: [PATCH 33/39] Export grid data #54 fix - fix for file location

---
 demo/bootstrap/index.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/demo/bootstrap/index.html b/demo/bootstrap/index.html
index fecbd10..5c124bf 100644
--- a/demo/bootstrap/index.html
+++ b/demo/bootstrap/index.html
@@ -253,7 +253,7 @@ <h4>Additional Demos</h4>
 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-messages.min.js"></script>
 <script src="../../dist/pagination.min.js"></script>
 <script src="../../dist/dataGrid.min.js"></script>
-<script src="../../dist/JSONToCSVConvertor.min.js"></script>
+<script src="../../dist/JSONToCSVConvertor.js"></script>
 <script src="js/demoApp.js"></script>
 </body>
 </html>
\ No newline at end of file

From b4456f289acbb9ecb1846a26c02d3e433750eb73 Mon Sep 17 00:00:00 2001
From: Alexander Zhuk <AZhuk@lifetimefitness.com>
Date: Thu, 17 Aug 2017 15:44:21 +0300
Subject: [PATCH 34/39] Export grid data #54 fix - adding link for plugin

---
 demo/bootstrap/index.html | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/demo/bootstrap/index.html b/demo/bootstrap/index.html
index 5c124bf..ab4b483 100644
--- a/demo/bootstrap/index.html
+++ b/demo/bootstrap/index.html
@@ -31,7 +31,9 @@
     <div class="margin-bottom-basic">
         <h3>Angular Data Grid sample using out-of-box Bootstrap styling</h3>
         Features enabled: sorting, filtering (using both in-grid and external controls), sync with browser URLs,
-        pagination and items-per-page functionality, plus optional plugin for CSV exports.
+        pagination and items-per-page functionality, <a
+            href="https://angular-data-grid.github.io/dist/JSONToCSVConvertor.js" target="_blank">optional plugin</a>
+        for CSV exports.
         Angular UI Datepicker used for date controls, although you can use any other framework, plugin or styling.
         <a href="https://github.com/angular-data-grid/angular-data-grid.github.io" target="_blank">Project GitHub</a>
     </div>

From 64bd85c82465334666870c49e3f2aa8005f961db Mon Sep 17 00:00:00 2001
From: Alexander Zhuk <AZhuk@lifetimefitness.com>
Date: Thu, 17 Aug 2017 16:17:48 +0300
Subject: [PATCH 35/39] feat(package): organize dependencies #51 fix

---
 package.json | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/package.json b/package.json
index 9aaf0b6..6c7b4de 100644
--- a/package.json
+++ b/package.json
@@ -5,7 +5,7 @@
     "start": "gulp serve",
     "prebuild": "npm install"
   },
-  "dependencies": {
+  "devDependencies": {
     "browser-sync": "^2.10.0",
     "gulp": "^3.9.0",
     "gulp-concat": "^2.6.0",
@@ -16,7 +16,7 @@
   },
   "description": "Light, flexible and performant Data Grid for AngularJS apps, with built-in sorting, pagination and filtering options, unified API for client-side and server-side data fetching, \r seamless synchronization with browser address bar and total freedom in mark-up and styling suitable for your application. Angular 1.3 - 1.6 compliant.",
   "main": "index.js",
-  "devDependencies": {},
+  "dependencies": {},
   "repository": {
     "type": "git",
     "url": "git+https://github.com/angular-data-grid/angular-data-grid.github.io.git"

From 3aa5d7d0c4620ab6e26b684c08efd839b4b24430 Mon Sep 17 00:00:00 2001
From: Andrey Chayko <chaiko.work@gmail.com>
Date: Fri, 18 Aug 2017 15:08:43 +0300
Subject: [PATCH 36/39] Removed default items per page value for data grid

---
 dist/dataGrid.js     | 2 +-
 dist/dataGrid.min.js | 2 +-
 src/js/dataGrid.js   | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/dist/dataGrid.js b/dist/dataGrid.js
index 14ee687..d7ddb3f 100644
--- a/dist/dataGrid.js
+++ b/dist/dataGrid.js
@@ -29,7 +29,7 @@
             $scope.filtered = $scope._gridOptions.data.slice();
             $scope.paginationOptions = $scope._gridOptions.pagination ? angular.copy($scope._gridOptions.pagination) : {};
             $scope.defaultsPaginationOptions = {
-                itemsPerPage: $scope.paginationOptions.itemsPerPage || '10',
+                itemsPerPage: $scope.paginationOptions.itemsPerPage,
                 currentPage: $scope.paginationOptions.currentPage || 1
             };
             $scope.paginationOptions = angular.copy($scope.defaultsPaginationOptions);
diff --git a/dist/dataGrid.min.js b/dist/dataGrid.min.js
index 0aa1794..a3a012d 100644
--- a/dist/dataGrid.min.js
+++ b/dist/dataGrid.min.js
@@ -1 +1 @@
-!function(){"use strict";function t(t,e){var i=[];if(t)return t.forEach(function(t){~i.indexOf(t[e])||i.push(t[e])}),i.map(function(t){return{text:t,value:t}})}angular.module("dataGrid",[]).filter("startFrom",function(){return function(t,e){return t?(e=+e,t.slice(e)):[]}}).controller("gridController",["$scope","$rootScope","$element","$filter","$location","filtersFactory",function(e,i,r,n,a,o){function s(){(e.urlSync||e.serverPagination)&&(e.serverPagination&&(clearTimeout(e.getDataTimeout),e.getDataTimeout=setTimeout(p,e.getDataDelay)),e.filtered&&l())}function c(t){var i,r=!1;i="page="+e.paginationOptions.currentPage,e.paginationOptions.itemsPerPage!==e.defaultsPaginationOptions.itemsPerPage&&(i+="&itemsPerPage="+e.paginationOptions.itemsPerPage),e.sortOptions.predicate&&(i+="&sort="+encodeURIComponent(e.sortOptions.predicate+"-"+e.sortOptions.direction)),e.filters.forEach(function(t){var n=t.model,a=t.isInScope?e.$eval(n):e.$parent.$eval(n);if(t.disableUrl)return void(r=!0);if(a){var o;if(a instanceof Date){if(isNaN(a.getTime()))return;o=a.getFullYear()+"-",o+=a.getMonth()<9?"0"+(a.getMonth()+1)+"-":a.getMonth()+1+"-",o+=a.getDate()<10?"0"+a.getDate():a.getDate(),a=o}i+="&"+encodeURIComponent(n)+"="+encodeURIComponent(a)}}),r&&d(),a.search(i),t&&e.$apply()}function l(){var t=a.search(),i={};if(Object.keys(t).forEach(function(e){"page"!==e&&"sort"!==e&&"itemsPerPage"!==e&&(i[e]=t[e])}),e.filters.forEach(function(t){var r=t.model,n=i[r];if(!t.disableUrl){if(~t.filterType.toLowerCase().indexOf("date"))return e.$parent.__evaltmp=n?new Date(n):null,void e.$parent.$eval(r+"=__evaltmp");"select"!==t.filterType||n||(n=""),n&&(t.isInScope?(e.__evaltmp=n,e.$eval(r+"=__evaltmp")):(e.$parent.__evaltmp=n,e.$parent.$eval(r+"=__evaltmp")))}}),e.paginationOptions.itemsPerPage=e.defaultsPaginationOptions.itemsPerPage,e.paginationOptions.currentPage=e.defaultsPaginationOptions.currentPage,t.itemsPerPage&&(e.paginationOptions.itemsPerPage=t.itemsPerPage),t.page&&(!e.serverPagination&&(t.page-1)*e.paginationOptions.itemsPerPage>e.filtered.length?e.paginationOptions.currentPage=1:e.paginationOptions.currentPage=t.page),t.sort){var r=t.sort.split("-");e.sortOptions.predicate=decodeURIComponent(r[0]),e.sortOptions.direction=decodeURIComponent(r[1])}e.serverPagination||d()}function p(){var t="",i=a.search();Object.keys(i).forEach(function(e){t+=e+"="+i[e]+"&"}),t=t.slice(0,-1),!t&&e.sortOptions.predicate?e.sort(e.sortOptions.predicate,!0):e._gridOptions.getData("?"+t,function(t,i){e.filtered=t,e.paginationOptions.totalItems=i})}function d(){var t=Date.now(),i=!1;e._time={},e.sortOptions.predicate&&e.sortCache&&e.sortCache.predicate===e.sortOptions.predicate&&e.sortCache.direction===e.sortOptions.direction?(e.filtered=e.sortCache.data.slice(),i=!0):e.filtered=e._gridOptions.data.slice(),e._time.copy=Date.now()-t;var r=Date.now();g(),e._time.filters=Date.now()-r;var a=Date.now();e.sortOptions.predicate&&!i&&(e.filtered=n("orderBy")(e.filtered,e.sortOptions.predicate,"desc"===e.sortOptions.direction),e.sortCache={data:e.filtered.slice(),predicate:e.sortOptions.predicate,direction:e.sortOptions.direction}),e._time.sort=Date.now()-a,e._time.all=Date.now()-t,e.paginationOptions.totalItems=e.filtered.length}function g(){e.filters.forEach(function(t){var i=t.filterBy,r=t.model,n=t.isInScope?e.$eval(r):e.$parent.$eval(r),a=t.filterType;if(e.customFilters[r])e.filtered=e.customFilters[r](e.filtered,n,i);else if(n&&a){var s=o.getFilterByType(a);s&&(e.filtered=s(e.filtered,n,i))}})}e._gridOptions=e.$eval(r.attr("grid-options")),e._gridActions=e.$eval(r.attr("grid-actions")),e.serverPagination="true"===r.attr("server-pagination"),e.getDataDelay=r.attr("get-delay")||350,e._gridActions||(e.$parent.$eval(r.attr("grid-actions")+"= {}"),e._gridActions=e.$parent.$eval(r.attr("grid-actions"))),e._gridOptions.grid=e,e.filtered=e._gridOptions.data.slice(),e.paginationOptions=e._gridOptions.pagination?angular.copy(e._gridOptions.pagination):{},e.defaultsPaginationOptions={itemsPerPage:e.paginationOptions.itemsPerPage||"10",currentPage:e.paginationOptions.currentPage||1},e.paginationOptions=angular.copy(e.defaultsPaginationOptions),e.sortOptions=e._gridOptions.sort?angular.copy(e._gridOptions.sort):{},e.customFilters=e._gridOptions.customFilters?angular.copy(e._gridOptions.customFilters):{},e.urlSync=e._gridOptions.urlSync,e.$watchCollection("_gridOptions.data",function(i){i&&i.length>-1&&(e.sortCache={},e.filtered=e._gridOptions.data.slice(),e.filters.forEach(function(i){"select"===i.filterType&&(e[i.model+"Options"]=t(e.filtered,i.filterBy))}),e.urlSync?l():d())}),e.sort=function(t,i){if(!i){var r=e.sortOptions.predicate===t&&"desc"===e.sortOptions.direction?"asc":"desc";e.sortOptions.direction=r,e.sortOptions.predicate=t}e.paginationOptions.currentPage=1,e.reloadGrid(i)},e.filter=function(){e.paginationOptions.currentPage=1,e.reloadGrid()},e.$on("$locationChangeSuccess",function(){s()}),e.$on("$stateChangeSuccess",function(t,e){s()}),e.reloadGrid=function(t){e.urlSync||e.serverPagination?c(t):d(),i.$broadcast("gridReloaded")},e._gridActions.refresh=e.reloadGrid,e._gridActions.filter=e.filter,e._gridActions.sort=e.sort}]).directive("gridItem",["$compile",function(t){return{restrict:"EA",terminal:!0,scope:!1,link:function(e,i,r,n,a){e.serverPagination?i.attr("ng-repeat","item in filtered"):i.attr("ng-repeat","item in filtered | startFrom:(paginationOptions.currentPage-1)*paginationOptions.itemsPerPage | limitTo:paginationOptions.itemsPerPage track by $index"),i.removeAttr("grid-item");var o=i[0].outerHTML;i.replaceWith(t(o)(e))}}}]).directive("gridData",["$compile","$animate",function(e){return{restrict:"EA",scope:!0,controller:"gridController",link:function(i,r,n){var a=[],o=r.parent(),s=n.id,c="true"===n.serverPagination;i.serverPagination=c,angular.forEach(angular.element(o[0].querySelectorAll("[sortable]")),function(t){var r=angular.element(t),n=r.attr("sortable");r.attr("ng-class","{'sort-ascent' : sortOptions.predicate ==='"+n+"' && sortOptions.direction === 'asc', 'sort-descent' : sortOptions.predicate === '"+n+"' && sortOptions.direction === 'desc'}"),r.attr("ng-click","sort('"+n+"')"),e(r)(i)}),angular.forEach(document.querySelectorAll("[filter-by]"),function(e){var n=angular.element(e),o=n.attr("filter-by"),c=document.querySelectorAll("[grid-data]")[0],l=c.querySelectorAll('[filter-by="'+o+'"]').length>0,p=n.attr("filter-type")||"",d=n.attr("ng-model"),g=n.attr("disable-url");s&&n.attr("grid-id")&&s!=n.attr("grid-id")||("select"!==p||(i[d+"Options"]=t(i.$eval(r.attr("grid-options")+".data"),o)),!~p.indexOf("date")||n.attr("ng-focus")||n.attr("ng-blur")||(n.attr("ng-focus","filter('{"+d+" : this."+d+"}')"),n.attr("ng-blur","filter('{"+d+" : this."+d+"}')")),d||(d=o,n.attr("ng-model",o),n.attr("ng-change","filter()")),a.push({model:d,isInScope:l,filterBy:o,filterType:p,disableUrl:g}))}),i.filters=a}}}]).factory("filtersFactory",function(){function t(t,e,i){return t.filter(function(t){return!e||!t[i]||t[i]===e})}function e(t,e,i){return t.filter(function(t){return e&&t[i]?~(t[i]+"").toLowerCase().indexOf((e+"").toLowerCase()):!!t[i]})}function i(t,e,i){return e=new Date(e).getTime(),t.filter(function(t){return!e||!t[i]||t[i]<=e+86399999})}function r(t,e,i){return e=new Date(e).getTime(),t.filter(function(t){return!e||!t[i]||t[i]>=e})}return{getFilterByType:function(n){switch(n){case"select":return t;case"text":return e;case"dateTo":return i;case"dateFrom":return r;default:return null}}}})}();
\ No newline at end of file
+!function(){"use strict";function t(t,e){var i=[];if(t)return t.forEach(function(t){~i.indexOf(t[e])||i.push(t[e])}),i.map(function(t){return{text:t,value:t}})}angular.module("dataGrid",[]).filter("startFrom",function(){return function(t,e){return t?(e=+e,t.slice(e)):[]}}).controller("gridController",["$scope","$rootScope","$element","$filter","$location","filtersFactory",function(e,i,r,n,a,o){function s(){(e.urlSync||e.serverPagination)&&(e.serverPagination&&(clearTimeout(e.getDataTimeout),e.getDataTimeout=setTimeout(p,e.getDataDelay)),e.filtered&&l())}function c(t){var i,r=!1;i="page="+e.paginationOptions.currentPage,e.paginationOptions.itemsPerPage!==e.defaultsPaginationOptions.itemsPerPage&&(i+="&itemsPerPage="+e.paginationOptions.itemsPerPage),e.sortOptions.predicate&&(i+="&sort="+encodeURIComponent(e.sortOptions.predicate+"-"+e.sortOptions.direction)),e.filters.forEach(function(t){var n=t.model,a=t.isInScope?e.$eval(n):e.$parent.$eval(n);if(t.disableUrl)return void(r=!0);if(a){var o;if(a instanceof Date){if(isNaN(a.getTime()))return;o=a.getFullYear()+"-",o+=a.getMonth()<9?"0"+(a.getMonth()+1)+"-":a.getMonth()+1+"-",o+=a.getDate()<10?"0"+a.getDate():a.getDate(),a=o}i+="&"+encodeURIComponent(n)+"="+encodeURIComponent(a)}}),r&&d(),a.search(i),t&&e.$apply()}function l(){var t=a.search(),i={};if(Object.keys(t).forEach(function(e){"page"!==e&&"sort"!==e&&"itemsPerPage"!==e&&(i[e]=t[e])}),e.filters.forEach(function(t){var r=t.model,n=i[r];if(!t.disableUrl){if(~t.filterType.toLowerCase().indexOf("date"))return e.$parent.__evaltmp=n?new Date(n):null,void e.$parent.$eval(r+"=__evaltmp");"select"!==t.filterType||n||(n=""),n&&(t.isInScope?(e.__evaltmp=n,e.$eval(r+"=__evaltmp")):(e.$parent.__evaltmp=n,e.$parent.$eval(r+"=__evaltmp")))}}),e.paginationOptions.itemsPerPage=e.defaultsPaginationOptions.itemsPerPage,e.paginationOptions.currentPage=e.defaultsPaginationOptions.currentPage,t.itemsPerPage&&(e.paginationOptions.itemsPerPage=t.itemsPerPage),t.page&&(!e.serverPagination&&(t.page-1)*e.paginationOptions.itemsPerPage>e.filtered.length?e.paginationOptions.currentPage=1:e.paginationOptions.currentPage=t.page),t.sort){var r=t.sort.split("-");e.sortOptions.predicate=decodeURIComponent(r[0]),e.sortOptions.direction=decodeURIComponent(r[1])}e.serverPagination||d()}function p(){var t="",i=a.search();Object.keys(i).forEach(function(e){t+=e+"="+i[e]+"&"}),t=t.slice(0,-1),!t&&e.sortOptions.predicate?e.sort(e.sortOptions.predicate,!0):e._gridOptions.getData("?"+t,function(t,i){e.filtered=t,e.paginationOptions.totalItems=i})}function d(){var t=Date.now(),i=!1;e._time={},e.sortOptions.predicate&&e.sortCache&&e.sortCache.predicate===e.sortOptions.predicate&&e.sortCache.direction===e.sortOptions.direction?(e.filtered=e.sortCache.data.slice(),i=!0):e.filtered=e._gridOptions.data.slice(),e._time.copy=Date.now()-t;var r=Date.now();g(),e._time.filters=Date.now()-r;var a=Date.now();e.sortOptions.predicate&&!i&&(e.filtered=n("orderBy")(e.filtered,e.sortOptions.predicate,"desc"===e.sortOptions.direction),e.sortCache={data:e.filtered.slice(),predicate:e.sortOptions.predicate,direction:e.sortOptions.direction}),e._time.sort=Date.now()-a,e._time.all=Date.now()-t,e.paginationOptions.totalItems=e.filtered.length}function g(){e.filters.forEach(function(t){var i=t.filterBy,r=t.model,n=t.isInScope?e.$eval(r):e.$parent.$eval(r),a=t.filterType;if(e.customFilters[r])e.filtered=e.customFilters[r](e.filtered,n,i);else if(n&&a){var s=o.getFilterByType(a);s&&(e.filtered=s(e.filtered,n,i))}})}e._gridOptions=e.$eval(r.attr("grid-options")),e._gridActions=e.$eval(r.attr("grid-actions")),e.serverPagination="true"===r.attr("server-pagination"),e.getDataDelay=r.attr("get-delay")||350,e._gridActions||(e.$parent.$eval(r.attr("grid-actions")+"= {}"),e._gridActions=e.$parent.$eval(r.attr("grid-actions"))),e._gridOptions.grid=e,e.filtered=e._gridOptions.data.slice(),e.paginationOptions=e._gridOptions.pagination?angular.copy(e._gridOptions.pagination):{},e.defaultsPaginationOptions={itemsPerPage:e.paginationOptions.itemsPerPage,currentPage:e.paginationOptions.currentPage||1},e.paginationOptions=angular.copy(e.defaultsPaginationOptions),e.sortOptions=e._gridOptions.sort?angular.copy(e._gridOptions.sort):{},e.customFilters=e._gridOptions.customFilters?angular.copy(e._gridOptions.customFilters):{},e.urlSync=e._gridOptions.urlSync,e.$watchCollection("_gridOptions.data",function(i){i&&i.length>-1&&(e.sortCache={},e.filtered=e._gridOptions.data.slice(),e.filters.forEach(function(i){"select"===i.filterType&&(e[i.model+"Options"]=t(e.filtered,i.filterBy))}),e.urlSync?l():d())}),e.sort=function(t,i){if(!i){var r=e.sortOptions.predicate===t&&"desc"===e.sortOptions.direction?"asc":"desc";e.sortOptions.direction=r,e.sortOptions.predicate=t}e.paginationOptions.currentPage=1,e.reloadGrid(i)},e.filter=function(){e.paginationOptions.currentPage=1,e.reloadGrid()},e.$on("$locationChangeSuccess",function(){s()}),e.$on("$stateChangeSuccess",function(t,e){s()}),e.reloadGrid=function(t){e.urlSync||e.serverPagination?c(t):d(),i.$broadcast("gridReloaded")},e._gridActions.refresh=e.reloadGrid,e._gridActions.filter=e.filter,e._gridActions.sort=e.sort}]).directive("gridItem",["$compile",function(t){return{restrict:"EA",terminal:!0,scope:!1,link:function(e,i,r,n,a){e.serverPagination?i.attr("ng-repeat","item in filtered"):i.attr("ng-repeat","item in filtered | startFrom:(paginationOptions.currentPage-1)*paginationOptions.itemsPerPage | limitTo:paginationOptions.itemsPerPage track by $index"),i.removeAttr("grid-item");var o=i[0].outerHTML;i.replaceWith(t(o)(e))}}}]).directive("gridData",["$compile","$animate",function(e){return{restrict:"EA",scope:!0,controller:"gridController",link:function(i,r,n){var a=[],o=r.parent(),s=n.id,c="true"===n.serverPagination;i.serverPagination=c,angular.forEach(angular.element(o[0].querySelectorAll("[sortable]")),function(t){var r=angular.element(t),n=r.attr("sortable");r.attr("ng-class","{'sort-ascent' : sortOptions.predicate ==='"+n+"' && sortOptions.direction === 'asc', 'sort-descent' : sortOptions.predicate === '"+n+"' && sortOptions.direction === 'desc'}"),r.attr("ng-click","sort('"+n+"')"),e(r)(i)}),angular.forEach(document.querySelectorAll("[filter-by]"),function(e){var n=angular.element(e),o=n.attr("filter-by"),c=document.querySelectorAll("[grid-data]")[0],l=c.querySelectorAll('[filter-by="'+o+'"]').length>0,p=n.attr("filter-type")||"",d=n.attr("ng-model"),g=n.attr("disable-url");s&&n.attr("grid-id")&&s!=n.attr("grid-id")||("select"!==p||(i[d+"Options"]=t(i.$eval(r.attr("grid-options")+".data"),o)),!~p.indexOf("date")||n.attr("ng-focus")||n.attr("ng-blur")||(n.attr("ng-focus","filter('{"+d+" : this."+d+"}')"),n.attr("ng-blur","filter('{"+d+" : this."+d+"}')")),d||(d=o,n.attr("ng-model",o),n.attr("ng-change","filter()")),a.push({model:d,isInScope:l,filterBy:o,filterType:p,disableUrl:g}))}),i.filters=a}}}]).factory("filtersFactory",function(){function t(t,e,i){return t.filter(function(t){return!e||!t[i]||t[i]===e})}function e(t,e,i){return t.filter(function(t){return e&&t[i]?~(t[i]+"").toLowerCase().indexOf((e+"").toLowerCase()):!!t[i]})}function i(t,e,i){return e=new Date(e).getTime(),t.filter(function(t){return!e||!t[i]||t[i]<=e+86399999})}function r(t,e,i){return e=new Date(e).getTime(),t.filter(function(t){return!e||!t[i]||t[i]>=e})}return{getFilterByType:function(n){switch(n){case"select":return t;case"text":return e;case"dateTo":return i;case"dateFrom":return r;default:return null}}}})}();
\ No newline at end of file
diff --git a/src/js/dataGrid.js b/src/js/dataGrid.js
index 14ee687..d7ddb3f 100644
--- a/src/js/dataGrid.js
+++ b/src/js/dataGrid.js
@@ -29,7 +29,7 @@
             $scope.filtered = $scope._gridOptions.data.slice();
             $scope.paginationOptions = $scope._gridOptions.pagination ? angular.copy($scope._gridOptions.pagination) : {};
             $scope.defaultsPaginationOptions = {
-                itemsPerPage: $scope.paginationOptions.itemsPerPage || '10',
+                itemsPerPage: $scope.paginationOptions.itemsPerPage,
                 currentPage: $scope.paginationOptions.currentPage || 1
             };
             $scope.paginationOptions = angular.copy($scope.defaultsPaginationOptions);

From 5cfba05904ec91b5128a982d6a3be3e7dd640822 Mon Sep 17 00:00:00 2001
From: Andrey Chayko <chaiko.work@gmail.com>
Date: Wed, 27 Sep 2017 14:07:57 +0300
Subject: [PATCH 37/39] #57 Fixed the issue when filtering stops working after
 sorting the data

---
 dist/dataGrid.js     | 3 +++
 dist/dataGrid.min.js | 2 +-
 src/js/dataGrid.js   | 3 +++
 3 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/dist/dataGrid.js b/dist/dataGrid.js
index d7ddb3f..bc5cfb5 100644
--- a/dist/dataGrid.js
+++ b/dist/dataGrid.js
@@ -279,6 +279,9 @@
                         urlName = filter.model,
                         value = filter.isInScope ? $scope.$eval(urlName) : $scope.$parent.$eval(urlName),
                         type = filter.filterType;
+                    if(type === 'select') {
+                        $scope.filtered = $scope._gridOptions.data.slice();
+                    }
                     if ($scope.customFilters[urlName]) {
                         $scope.filtered = $scope.customFilters[urlName]($scope.filtered, value, predicate);
                     } else if (value && type) {
diff --git a/dist/dataGrid.min.js b/dist/dataGrid.min.js
index a3a012d..5bc0364 100644
--- a/dist/dataGrid.min.js
+++ b/dist/dataGrid.min.js
@@ -1 +1 @@
-!function(){"use strict";function t(t,e){var i=[];if(t)return t.forEach(function(t){~i.indexOf(t[e])||i.push(t[e])}),i.map(function(t){return{text:t,value:t}})}angular.module("dataGrid",[]).filter("startFrom",function(){return function(t,e){return t?(e=+e,t.slice(e)):[]}}).controller("gridController",["$scope","$rootScope","$element","$filter","$location","filtersFactory",function(e,i,r,n,a,o){function s(){(e.urlSync||e.serverPagination)&&(e.serverPagination&&(clearTimeout(e.getDataTimeout),e.getDataTimeout=setTimeout(p,e.getDataDelay)),e.filtered&&l())}function c(t){var i,r=!1;i="page="+e.paginationOptions.currentPage,e.paginationOptions.itemsPerPage!==e.defaultsPaginationOptions.itemsPerPage&&(i+="&itemsPerPage="+e.paginationOptions.itemsPerPage),e.sortOptions.predicate&&(i+="&sort="+encodeURIComponent(e.sortOptions.predicate+"-"+e.sortOptions.direction)),e.filters.forEach(function(t){var n=t.model,a=t.isInScope?e.$eval(n):e.$parent.$eval(n);if(t.disableUrl)return void(r=!0);if(a){var o;if(a instanceof Date){if(isNaN(a.getTime()))return;o=a.getFullYear()+"-",o+=a.getMonth()<9?"0"+(a.getMonth()+1)+"-":a.getMonth()+1+"-",o+=a.getDate()<10?"0"+a.getDate():a.getDate(),a=o}i+="&"+encodeURIComponent(n)+"="+encodeURIComponent(a)}}),r&&d(),a.search(i),t&&e.$apply()}function l(){var t=a.search(),i={};if(Object.keys(t).forEach(function(e){"page"!==e&&"sort"!==e&&"itemsPerPage"!==e&&(i[e]=t[e])}),e.filters.forEach(function(t){var r=t.model,n=i[r];if(!t.disableUrl){if(~t.filterType.toLowerCase().indexOf("date"))return e.$parent.__evaltmp=n?new Date(n):null,void e.$parent.$eval(r+"=__evaltmp");"select"!==t.filterType||n||(n=""),n&&(t.isInScope?(e.__evaltmp=n,e.$eval(r+"=__evaltmp")):(e.$parent.__evaltmp=n,e.$parent.$eval(r+"=__evaltmp")))}}),e.paginationOptions.itemsPerPage=e.defaultsPaginationOptions.itemsPerPage,e.paginationOptions.currentPage=e.defaultsPaginationOptions.currentPage,t.itemsPerPage&&(e.paginationOptions.itemsPerPage=t.itemsPerPage),t.page&&(!e.serverPagination&&(t.page-1)*e.paginationOptions.itemsPerPage>e.filtered.length?e.paginationOptions.currentPage=1:e.paginationOptions.currentPage=t.page),t.sort){var r=t.sort.split("-");e.sortOptions.predicate=decodeURIComponent(r[0]),e.sortOptions.direction=decodeURIComponent(r[1])}e.serverPagination||d()}function p(){var t="",i=a.search();Object.keys(i).forEach(function(e){t+=e+"="+i[e]+"&"}),t=t.slice(0,-1),!t&&e.sortOptions.predicate?e.sort(e.sortOptions.predicate,!0):e._gridOptions.getData("?"+t,function(t,i){e.filtered=t,e.paginationOptions.totalItems=i})}function d(){var t=Date.now(),i=!1;e._time={},e.sortOptions.predicate&&e.sortCache&&e.sortCache.predicate===e.sortOptions.predicate&&e.sortCache.direction===e.sortOptions.direction?(e.filtered=e.sortCache.data.slice(),i=!0):e.filtered=e._gridOptions.data.slice(),e._time.copy=Date.now()-t;var r=Date.now();g(),e._time.filters=Date.now()-r;var a=Date.now();e.sortOptions.predicate&&!i&&(e.filtered=n("orderBy")(e.filtered,e.sortOptions.predicate,"desc"===e.sortOptions.direction),e.sortCache={data:e.filtered.slice(),predicate:e.sortOptions.predicate,direction:e.sortOptions.direction}),e._time.sort=Date.now()-a,e._time.all=Date.now()-t,e.paginationOptions.totalItems=e.filtered.length}function g(){e.filters.forEach(function(t){var i=t.filterBy,r=t.model,n=t.isInScope?e.$eval(r):e.$parent.$eval(r),a=t.filterType;if(e.customFilters[r])e.filtered=e.customFilters[r](e.filtered,n,i);else if(n&&a){var s=o.getFilterByType(a);s&&(e.filtered=s(e.filtered,n,i))}})}e._gridOptions=e.$eval(r.attr("grid-options")),e._gridActions=e.$eval(r.attr("grid-actions")),e.serverPagination="true"===r.attr("server-pagination"),e.getDataDelay=r.attr("get-delay")||350,e._gridActions||(e.$parent.$eval(r.attr("grid-actions")+"= {}"),e._gridActions=e.$parent.$eval(r.attr("grid-actions"))),e._gridOptions.grid=e,e.filtered=e._gridOptions.data.slice(),e.paginationOptions=e._gridOptions.pagination?angular.copy(e._gridOptions.pagination):{},e.defaultsPaginationOptions={itemsPerPage:e.paginationOptions.itemsPerPage,currentPage:e.paginationOptions.currentPage||1},e.paginationOptions=angular.copy(e.defaultsPaginationOptions),e.sortOptions=e._gridOptions.sort?angular.copy(e._gridOptions.sort):{},e.customFilters=e._gridOptions.customFilters?angular.copy(e._gridOptions.customFilters):{},e.urlSync=e._gridOptions.urlSync,e.$watchCollection("_gridOptions.data",function(i){i&&i.length>-1&&(e.sortCache={},e.filtered=e._gridOptions.data.slice(),e.filters.forEach(function(i){"select"===i.filterType&&(e[i.model+"Options"]=t(e.filtered,i.filterBy))}),e.urlSync?l():d())}),e.sort=function(t,i){if(!i){var r=e.sortOptions.predicate===t&&"desc"===e.sortOptions.direction?"asc":"desc";e.sortOptions.direction=r,e.sortOptions.predicate=t}e.paginationOptions.currentPage=1,e.reloadGrid(i)},e.filter=function(){e.paginationOptions.currentPage=1,e.reloadGrid()},e.$on("$locationChangeSuccess",function(){s()}),e.$on("$stateChangeSuccess",function(t,e){s()}),e.reloadGrid=function(t){e.urlSync||e.serverPagination?c(t):d(),i.$broadcast("gridReloaded")},e._gridActions.refresh=e.reloadGrid,e._gridActions.filter=e.filter,e._gridActions.sort=e.sort}]).directive("gridItem",["$compile",function(t){return{restrict:"EA",terminal:!0,scope:!1,link:function(e,i,r,n,a){e.serverPagination?i.attr("ng-repeat","item in filtered"):i.attr("ng-repeat","item in filtered | startFrom:(paginationOptions.currentPage-1)*paginationOptions.itemsPerPage | limitTo:paginationOptions.itemsPerPage track by $index"),i.removeAttr("grid-item");var o=i[0].outerHTML;i.replaceWith(t(o)(e))}}}]).directive("gridData",["$compile","$animate",function(e){return{restrict:"EA",scope:!0,controller:"gridController",link:function(i,r,n){var a=[],o=r.parent(),s=n.id,c="true"===n.serverPagination;i.serverPagination=c,angular.forEach(angular.element(o[0].querySelectorAll("[sortable]")),function(t){var r=angular.element(t),n=r.attr("sortable");r.attr("ng-class","{'sort-ascent' : sortOptions.predicate ==='"+n+"' && sortOptions.direction === 'asc', 'sort-descent' : sortOptions.predicate === '"+n+"' && sortOptions.direction === 'desc'}"),r.attr("ng-click","sort('"+n+"')"),e(r)(i)}),angular.forEach(document.querySelectorAll("[filter-by]"),function(e){var n=angular.element(e),o=n.attr("filter-by"),c=document.querySelectorAll("[grid-data]")[0],l=c.querySelectorAll('[filter-by="'+o+'"]').length>0,p=n.attr("filter-type")||"",d=n.attr("ng-model"),g=n.attr("disable-url");s&&n.attr("grid-id")&&s!=n.attr("grid-id")||("select"!==p||(i[d+"Options"]=t(i.$eval(r.attr("grid-options")+".data"),o)),!~p.indexOf("date")||n.attr("ng-focus")||n.attr("ng-blur")||(n.attr("ng-focus","filter('{"+d+" : this."+d+"}')"),n.attr("ng-blur","filter('{"+d+" : this."+d+"}')")),d||(d=o,n.attr("ng-model",o),n.attr("ng-change","filter()")),a.push({model:d,isInScope:l,filterBy:o,filterType:p,disableUrl:g}))}),i.filters=a}}}]).factory("filtersFactory",function(){function t(t,e,i){return t.filter(function(t){return!e||!t[i]||t[i]===e})}function e(t,e,i){return t.filter(function(t){return e&&t[i]?~(t[i]+"").toLowerCase().indexOf((e+"").toLowerCase()):!!t[i]})}function i(t,e,i){return e=new Date(e).getTime(),t.filter(function(t){return!e||!t[i]||t[i]<=e+86399999})}function r(t,e,i){return e=new Date(e).getTime(),t.filter(function(t){return!e||!t[i]||t[i]>=e})}return{getFilterByType:function(n){switch(n){case"select":return t;case"text":return e;case"dateTo":return i;case"dateFrom":return r;default:return null}}}})}();
\ No newline at end of file
+!function(){"use strict";function t(t,e){var i=[];if(t)return t.forEach(function(t){~i.indexOf(t[e])||i.push(t[e])}),i.map(function(t){return{text:t,value:t}})}angular.module("dataGrid",[]).filter("startFrom",function(){return function(t,e){return t?(e=+e,t.slice(e)):[]}}).controller("gridController",["$scope","$rootScope","$element","$filter","$location","filtersFactory",function(e,i,r,n,a,o){function s(){(e.urlSync||e.serverPagination)&&(e.serverPagination&&(clearTimeout(e.getDataTimeout),e.getDataTimeout=setTimeout(p,e.getDataDelay)),e.filtered&&l())}function c(t){var i,r=!1;i="page="+e.paginationOptions.currentPage,e.paginationOptions.itemsPerPage!==e.defaultsPaginationOptions.itemsPerPage&&(i+="&itemsPerPage="+e.paginationOptions.itemsPerPage),e.sortOptions.predicate&&(i+="&sort="+encodeURIComponent(e.sortOptions.predicate+"-"+e.sortOptions.direction)),e.filters.forEach(function(t){var n=t.model,a=t.isInScope?e.$eval(n):e.$parent.$eval(n);if(t.disableUrl)return void(r=!0);if(a){var o;if(a instanceof Date){if(isNaN(a.getTime()))return;o=a.getFullYear()+"-",o+=a.getMonth()<9?"0"+(a.getMonth()+1)+"-":a.getMonth()+1+"-",o+=a.getDate()<10?"0"+a.getDate():a.getDate(),a=o}i+="&"+encodeURIComponent(n)+"="+encodeURIComponent(a)}}),r&&d(),a.search(i),t&&e.$apply()}function l(){var t=a.search(),i={};if(Object.keys(t).forEach(function(e){"page"!==e&&"sort"!==e&&"itemsPerPage"!==e&&(i[e]=t[e])}),e.filters.forEach(function(t){var r=t.model,n=i[r];if(!t.disableUrl){if(~t.filterType.toLowerCase().indexOf("date"))return e.$parent.__evaltmp=n?new Date(n):null,void e.$parent.$eval(r+"=__evaltmp");"select"!==t.filterType||n||(n=""),n&&(t.isInScope?(e.__evaltmp=n,e.$eval(r+"=__evaltmp")):(e.$parent.__evaltmp=n,e.$parent.$eval(r+"=__evaltmp")))}}),e.paginationOptions.itemsPerPage=e.defaultsPaginationOptions.itemsPerPage,e.paginationOptions.currentPage=e.defaultsPaginationOptions.currentPage,t.itemsPerPage&&(e.paginationOptions.itemsPerPage=t.itemsPerPage),t.page&&(!e.serverPagination&&(t.page-1)*e.paginationOptions.itemsPerPage>e.filtered.length?e.paginationOptions.currentPage=1:e.paginationOptions.currentPage=t.page),t.sort){var r=t.sort.split("-");e.sortOptions.predicate=decodeURIComponent(r[0]),e.sortOptions.direction=decodeURIComponent(r[1])}e.serverPagination||d()}function p(){var t="",i=a.search();Object.keys(i).forEach(function(e){t+=e+"="+i[e]+"&"}),t=t.slice(0,-1),!t&&e.sortOptions.predicate?e.sort(e.sortOptions.predicate,!0):e._gridOptions.getData("?"+t,function(t,i){e.filtered=t,e.paginationOptions.totalItems=i})}function d(){var t=Date.now(),i=!1;e._time={},e.sortOptions.predicate&&e.sortCache&&e.sortCache.predicate===e.sortOptions.predicate&&e.sortCache.direction===e.sortOptions.direction?(e.filtered=e.sortCache.data.slice(),i=!0):e.filtered=e._gridOptions.data.slice(),e._time.copy=Date.now()-t;var r=Date.now();g(),e._time.filters=Date.now()-r;var a=Date.now();e.sortOptions.predicate&&!i&&(e.filtered=n("orderBy")(e.filtered,e.sortOptions.predicate,"desc"===e.sortOptions.direction),e.sortCache={data:e.filtered.slice(),predicate:e.sortOptions.predicate,direction:e.sortOptions.direction}),e._time.sort=Date.now()-a,e._time.all=Date.now()-t,e.paginationOptions.totalItems=e.filtered.length}function g(){e.filters.forEach(function(t){var i=t.filterBy,r=t.model,n=t.isInScope?e.$eval(r):e.$parent.$eval(r),a=t.filterType;if("select"===a&&(e.filtered=e._gridOptions.data.slice()),e.customFilters[r])e.filtered=e.customFilters[r](e.filtered,n,i);else if(n&&a){var s=o.getFilterByType(a);s&&(e.filtered=s(e.filtered,n,i))}})}e._gridOptions=e.$eval(r.attr("grid-options")),e._gridActions=e.$eval(r.attr("grid-actions")),e.serverPagination="true"===r.attr("server-pagination"),e.getDataDelay=r.attr("get-delay")||350,e._gridActions||(e.$parent.$eval(r.attr("grid-actions")+"= {}"),e._gridActions=e.$parent.$eval(r.attr("grid-actions"))),e._gridOptions.grid=e,e.filtered=e._gridOptions.data.slice(),e.paginationOptions=e._gridOptions.pagination?angular.copy(e._gridOptions.pagination):{},e.defaultsPaginationOptions={itemsPerPage:e.paginationOptions.itemsPerPage,currentPage:e.paginationOptions.currentPage||1},e.paginationOptions=angular.copy(e.defaultsPaginationOptions),e.sortOptions=e._gridOptions.sort?angular.copy(e._gridOptions.sort):{},e.customFilters=e._gridOptions.customFilters?angular.copy(e._gridOptions.customFilters):{},e.urlSync=e._gridOptions.urlSync,e.$watchCollection("_gridOptions.data",function(i){i&&i.length>-1&&(e.sortCache={},e.filtered=e._gridOptions.data.slice(),e.filters.forEach(function(i){"select"===i.filterType&&(e[i.model+"Options"]=t(e.filtered,i.filterBy))}),e.urlSync?l():d())}),e.sort=function(t,i){if(!i){var r=e.sortOptions.predicate===t&&"desc"===e.sortOptions.direction?"asc":"desc";e.sortOptions.direction=r,e.sortOptions.predicate=t}e.paginationOptions.currentPage=1,e.reloadGrid(i)},e.filter=function(){e.paginationOptions.currentPage=1,e.reloadGrid()},e.$on("$locationChangeSuccess",function(){s()}),e.$on("$stateChangeSuccess",function(t,e){s()}),e.reloadGrid=function(t){e.urlSync||e.serverPagination?c(t):d(),i.$broadcast("gridReloaded")},e._gridActions.refresh=e.reloadGrid,e._gridActions.filter=e.filter,e._gridActions.sort=e.sort}]).directive("gridItem",["$compile",function(t){return{restrict:"EA",terminal:!0,scope:!1,link:function(e,i,r,n,a){e.serverPagination?i.attr("ng-repeat","item in filtered"):i.attr("ng-repeat","item in filtered | startFrom:(paginationOptions.currentPage-1)*paginationOptions.itemsPerPage | limitTo:paginationOptions.itemsPerPage track by $index"),i.removeAttr("grid-item");var o=i[0].outerHTML;i.replaceWith(t(o)(e))}}}]).directive("gridData",["$compile","$animate",function(e){return{restrict:"EA",scope:!0,controller:"gridController",link:function(i,r,n){var a=[],o=r.parent(),s=n.id,c="true"===n.serverPagination;i.serverPagination=c,angular.forEach(angular.element(o[0].querySelectorAll("[sortable]")),function(t){var r=angular.element(t),n=r.attr("sortable");r.attr("ng-class","{'sort-ascent' : sortOptions.predicate ==='"+n+"' && sortOptions.direction === 'asc', 'sort-descent' : sortOptions.predicate === '"+n+"' && sortOptions.direction === 'desc'}"),r.attr("ng-click","sort('"+n+"')"),e(r)(i)}),angular.forEach(document.querySelectorAll("[filter-by]"),function(e){var n=angular.element(e),o=n.attr("filter-by"),c=document.querySelectorAll("[grid-data]")[0],l=c.querySelectorAll('[filter-by="'+o+'"]').length>0,p=n.attr("filter-type")||"",d=n.attr("ng-model"),g=n.attr("disable-url");s&&n.attr("grid-id")&&s!=n.attr("grid-id")||("select"!==p||(i[d+"Options"]=t(i.$eval(r.attr("grid-options")+".data"),o)),!~p.indexOf("date")||n.attr("ng-focus")||n.attr("ng-blur")||(n.attr("ng-focus","filter('{"+d+" : this."+d+"}')"),n.attr("ng-blur","filter('{"+d+" : this."+d+"}')")),d||(d=o,n.attr("ng-model",o),n.attr("ng-change","filter()")),a.push({model:d,isInScope:l,filterBy:o,filterType:p,disableUrl:g}))}),i.filters=a}}}]).factory("filtersFactory",function(){function t(t,e,i){return t.filter(function(t){return!e||!t[i]||t[i]===e})}function e(t,e,i){return t.filter(function(t){return e&&t[i]?~(t[i]+"").toLowerCase().indexOf((e+"").toLowerCase()):!!t[i]})}function i(t,e,i){return e=new Date(e).getTime(),t.filter(function(t){return!e||!t[i]||t[i]<=e+86399999})}function r(t,e,i){return e=new Date(e).getTime(),t.filter(function(t){return!e||!t[i]||t[i]>=e})}return{getFilterByType:function(n){switch(n){case"select":return t;case"text":return e;case"dateTo":return i;case"dateFrom":return r;default:return null}}}})}();
\ No newline at end of file
diff --git a/src/js/dataGrid.js b/src/js/dataGrid.js
index d7ddb3f..bc5cfb5 100644
--- a/src/js/dataGrid.js
+++ b/src/js/dataGrid.js
@@ -279,6 +279,9 @@
                         urlName = filter.model,
                         value = filter.isInScope ? $scope.$eval(urlName) : $scope.$parent.$eval(urlName),
                         type = filter.filterType;
+                    if(type === 'select') {
+                        $scope.filtered = $scope._gridOptions.data.slice();
+                    }
                     if ($scope.customFilters[urlName]) {
                         $scope.filtered = $scope.customFilters[urlName]($scope.filtered, value, predicate);
                     } else if (value && type) {

From a4962d03adc6909e7b1a1a2ff75d7109d35f563d Mon Sep 17 00:00:00 2001
From: Andrey Chayko <chaiko.work@gmail.com>
Date: Thu, 28 Sep 2017 11:32:58 +0300
Subject: [PATCH 38/39] #57 reverted changes

---
 dist/dataGrid.js     | 3 ---
 dist/dataGrid.min.js | 2 +-
 src/js/dataGrid.js   | 3 ---
 3 files changed, 1 insertion(+), 7 deletions(-)

diff --git a/dist/dataGrid.js b/dist/dataGrid.js
index bc5cfb5..d7ddb3f 100644
--- a/dist/dataGrid.js
+++ b/dist/dataGrid.js
@@ -279,9 +279,6 @@
                         urlName = filter.model,
                         value = filter.isInScope ? $scope.$eval(urlName) : $scope.$parent.$eval(urlName),
                         type = filter.filterType;
-                    if(type === 'select') {
-                        $scope.filtered = $scope._gridOptions.data.slice();
-                    }
                     if ($scope.customFilters[urlName]) {
                         $scope.filtered = $scope.customFilters[urlName]($scope.filtered, value, predicate);
                     } else if (value && type) {
diff --git a/dist/dataGrid.min.js b/dist/dataGrid.min.js
index 5bc0364..a3a012d 100644
--- a/dist/dataGrid.min.js
+++ b/dist/dataGrid.min.js
@@ -1 +1 @@
-!function(){"use strict";function t(t,e){var i=[];if(t)return t.forEach(function(t){~i.indexOf(t[e])||i.push(t[e])}),i.map(function(t){return{text:t,value:t}})}angular.module("dataGrid",[]).filter("startFrom",function(){return function(t,e){return t?(e=+e,t.slice(e)):[]}}).controller("gridController",["$scope","$rootScope","$element","$filter","$location","filtersFactory",function(e,i,r,n,a,o){function s(){(e.urlSync||e.serverPagination)&&(e.serverPagination&&(clearTimeout(e.getDataTimeout),e.getDataTimeout=setTimeout(p,e.getDataDelay)),e.filtered&&l())}function c(t){var i,r=!1;i="page="+e.paginationOptions.currentPage,e.paginationOptions.itemsPerPage!==e.defaultsPaginationOptions.itemsPerPage&&(i+="&itemsPerPage="+e.paginationOptions.itemsPerPage),e.sortOptions.predicate&&(i+="&sort="+encodeURIComponent(e.sortOptions.predicate+"-"+e.sortOptions.direction)),e.filters.forEach(function(t){var n=t.model,a=t.isInScope?e.$eval(n):e.$parent.$eval(n);if(t.disableUrl)return void(r=!0);if(a){var o;if(a instanceof Date){if(isNaN(a.getTime()))return;o=a.getFullYear()+"-",o+=a.getMonth()<9?"0"+(a.getMonth()+1)+"-":a.getMonth()+1+"-",o+=a.getDate()<10?"0"+a.getDate():a.getDate(),a=o}i+="&"+encodeURIComponent(n)+"="+encodeURIComponent(a)}}),r&&d(),a.search(i),t&&e.$apply()}function l(){var t=a.search(),i={};if(Object.keys(t).forEach(function(e){"page"!==e&&"sort"!==e&&"itemsPerPage"!==e&&(i[e]=t[e])}),e.filters.forEach(function(t){var r=t.model,n=i[r];if(!t.disableUrl){if(~t.filterType.toLowerCase().indexOf("date"))return e.$parent.__evaltmp=n?new Date(n):null,void e.$parent.$eval(r+"=__evaltmp");"select"!==t.filterType||n||(n=""),n&&(t.isInScope?(e.__evaltmp=n,e.$eval(r+"=__evaltmp")):(e.$parent.__evaltmp=n,e.$parent.$eval(r+"=__evaltmp")))}}),e.paginationOptions.itemsPerPage=e.defaultsPaginationOptions.itemsPerPage,e.paginationOptions.currentPage=e.defaultsPaginationOptions.currentPage,t.itemsPerPage&&(e.paginationOptions.itemsPerPage=t.itemsPerPage),t.page&&(!e.serverPagination&&(t.page-1)*e.paginationOptions.itemsPerPage>e.filtered.length?e.paginationOptions.currentPage=1:e.paginationOptions.currentPage=t.page),t.sort){var r=t.sort.split("-");e.sortOptions.predicate=decodeURIComponent(r[0]),e.sortOptions.direction=decodeURIComponent(r[1])}e.serverPagination||d()}function p(){var t="",i=a.search();Object.keys(i).forEach(function(e){t+=e+"="+i[e]+"&"}),t=t.slice(0,-1),!t&&e.sortOptions.predicate?e.sort(e.sortOptions.predicate,!0):e._gridOptions.getData("?"+t,function(t,i){e.filtered=t,e.paginationOptions.totalItems=i})}function d(){var t=Date.now(),i=!1;e._time={},e.sortOptions.predicate&&e.sortCache&&e.sortCache.predicate===e.sortOptions.predicate&&e.sortCache.direction===e.sortOptions.direction?(e.filtered=e.sortCache.data.slice(),i=!0):e.filtered=e._gridOptions.data.slice(),e._time.copy=Date.now()-t;var r=Date.now();g(),e._time.filters=Date.now()-r;var a=Date.now();e.sortOptions.predicate&&!i&&(e.filtered=n("orderBy")(e.filtered,e.sortOptions.predicate,"desc"===e.sortOptions.direction),e.sortCache={data:e.filtered.slice(),predicate:e.sortOptions.predicate,direction:e.sortOptions.direction}),e._time.sort=Date.now()-a,e._time.all=Date.now()-t,e.paginationOptions.totalItems=e.filtered.length}function g(){e.filters.forEach(function(t){var i=t.filterBy,r=t.model,n=t.isInScope?e.$eval(r):e.$parent.$eval(r),a=t.filterType;if("select"===a&&(e.filtered=e._gridOptions.data.slice()),e.customFilters[r])e.filtered=e.customFilters[r](e.filtered,n,i);else if(n&&a){var s=o.getFilterByType(a);s&&(e.filtered=s(e.filtered,n,i))}})}e._gridOptions=e.$eval(r.attr("grid-options")),e._gridActions=e.$eval(r.attr("grid-actions")),e.serverPagination="true"===r.attr("server-pagination"),e.getDataDelay=r.attr("get-delay")||350,e._gridActions||(e.$parent.$eval(r.attr("grid-actions")+"= {}"),e._gridActions=e.$parent.$eval(r.attr("grid-actions"))),e._gridOptions.grid=e,e.filtered=e._gridOptions.data.slice(),e.paginationOptions=e._gridOptions.pagination?angular.copy(e._gridOptions.pagination):{},e.defaultsPaginationOptions={itemsPerPage:e.paginationOptions.itemsPerPage,currentPage:e.paginationOptions.currentPage||1},e.paginationOptions=angular.copy(e.defaultsPaginationOptions),e.sortOptions=e._gridOptions.sort?angular.copy(e._gridOptions.sort):{},e.customFilters=e._gridOptions.customFilters?angular.copy(e._gridOptions.customFilters):{},e.urlSync=e._gridOptions.urlSync,e.$watchCollection("_gridOptions.data",function(i){i&&i.length>-1&&(e.sortCache={},e.filtered=e._gridOptions.data.slice(),e.filters.forEach(function(i){"select"===i.filterType&&(e[i.model+"Options"]=t(e.filtered,i.filterBy))}),e.urlSync?l():d())}),e.sort=function(t,i){if(!i){var r=e.sortOptions.predicate===t&&"desc"===e.sortOptions.direction?"asc":"desc";e.sortOptions.direction=r,e.sortOptions.predicate=t}e.paginationOptions.currentPage=1,e.reloadGrid(i)},e.filter=function(){e.paginationOptions.currentPage=1,e.reloadGrid()},e.$on("$locationChangeSuccess",function(){s()}),e.$on("$stateChangeSuccess",function(t,e){s()}),e.reloadGrid=function(t){e.urlSync||e.serverPagination?c(t):d(),i.$broadcast("gridReloaded")},e._gridActions.refresh=e.reloadGrid,e._gridActions.filter=e.filter,e._gridActions.sort=e.sort}]).directive("gridItem",["$compile",function(t){return{restrict:"EA",terminal:!0,scope:!1,link:function(e,i,r,n,a){e.serverPagination?i.attr("ng-repeat","item in filtered"):i.attr("ng-repeat","item in filtered | startFrom:(paginationOptions.currentPage-1)*paginationOptions.itemsPerPage | limitTo:paginationOptions.itemsPerPage track by $index"),i.removeAttr("grid-item");var o=i[0].outerHTML;i.replaceWith(t(o)(e))}}}]).directive("gridData",["$compile","$animate",function(e){return{restrict:"EA",scope:!0,controller:"gridController",link:function(i,r,n){var a=[],o=r.parent(),s=n.id,c="true"===n.serverPagination;i.serverPagination=c,angular.forEach(angular.element(o[0].querySelectorAll("[sortable]")),function(t){var r=angular.element(t),n=r.attr("sortable");r.attr("ng-class","{'sort-ascent' : sortOptions.predicate ==='"+n+"' && sortOptions.direction === 'asc', 'sort-descent' : sortOptions.predicate === '"+n+"' && sortOptions.direction === 'desc'}"),r.attr("ng-click","sort('"+n+"')"),e(r)(i)}),angular.forEach(document.querySelectorAll("[filter-by]"),function(e){var n=angular.element(e),o=n.attr("filter-by"),c=document.querySelectorAll("[grid-data]")[0],l=c.querySelectorAll('[filter-by="'+o+'"]').length>0,p=n.attr("filter-type")||"",d=n.attr("ng-model"),g=n.attr("disable-url");s&&n.attr("grid-id")&&s!=n.attr("grid-id")||("select"!==p||(i[d+"Options"]=t(i.$eval(r.attr("grid-options")+".data"),o)),!~p.indexOf("date")||n.attr("ng-focus")||n.attr("ng-blur")||(n.attr("ng-focus","filter('{"+d+" : this."+d+"}')"),n.attr("ng-blur","filter('{"+d+" : this."+d+"}')")),d||(d=o,n.attr("ng-model",o),n.attr("ng-change","filter()")),a.push({model:d,isInScope:l,filterBy:o,filterType:p,disableUrl:g}))}),i.filters=a}}}]).factory("filtersFactory",function(){function t(t,e,i){return t.filter(function(t){return!e||!t[i]||t[i]===e})}function e(t,e,i){return t.filter(function(t){return e&&t[i]?~(t[i]+"").toLowerCase().indexOf((e+"").toLowerCase()):!!t[i]})}function i(t,e,i){return e=new Date(e).getTime(),t.filter(function(t){return!e||!t[i]||t[i]<=e+86399999})}function r(t,e,i){return e=new Date(e).getTime(),t.filter(function(t){return!e||!t[i]||t[i]>=e})}return{getFilterByType:function(n){switch(n){case"select":return t;case"text":return e;case"dateTo":return i;case"dateFrom":return r;default:return null}}}})}();
\ No newline at end of file
+!function(){"use strict";function t(t,e){var i=[];if(t)return t.forEach(function(t){~i.indexOf(t[e])||i.push(t[e])}),i.map(function(t){return{text:t,value:t}})}angular.module("dataGrid",[]).filter("startFrom",function(){return function(t,e){return t?(e=+e,t.slice(e)):[]}}).controller("gridController",["$scope","$rootScope","$element","$filter","$location","filtersFactory",function(e,i,r,n,a,o){function s(){(e.urlSync||e.serverPagination)&&(e.serverPagination&&(clearTimeout(e.getDataTimeout),e.getDataTimeout=setTimeout(p,e.getDataDelay)),e.filtered&&l())}function c(t){var i,r=!1;i="page="+e.paginationOptions.currentPage,e.paginationOptions.itemsPerPage!==e.defaultsPaginationOptions.itemsPerPage&&(i+="&itemsPerPage="+e.paginationOptions.itemsPerPage),e.sortOptions.predicate&&(i+="&sort="+encodeURIComponent(e.sortOptions.predicate+"-"+e.sortOptions.direction)),e.filters.forEach(function(t){var n=t.model,a=t.isInScope?e.$eval(n):e.$parent.$eval(n);if(t.disableUrl)return void(r=!0);if(a){var o;if(a instanceof Date){if(isNaN(a.getTime()))return;o=a.getFullYear()+"-",o+=a.getMonth()<9?"0"+(a.getMonth()+1)+"-":a.getMonth()+1+"-",o+=a.getDate()<10?"0"+a.getDate():a.getDate(),a=o}i+="&"+encodeURIComponent(n)+"="+encodeURIComponent(a)}}),r&&d(),a.search(i),t&&e.$apply()}function l(){var t=a.search(),i={};if(Object.keys(t).forEach(function(e){"page"!==e&&"sort"!==e&&"itemsPerPage"!==e&&(i[e]=t[e])}),e.filters.forEach(function(t){var r=t.model,n=i[r];if(!t.disableUrl){if(~t.filterType.toLowerCase().indexOf("date"))return e.$parent.__evaltmp=n?new Date(n):null,void e.$parent.$eval(r+"=__evaltmp");"select"!==t.filterType||n||(n=""),n&&(t.isInScope?(e.__evaltmp=n,e.$eval(r+"=__evaltmp")):(e.$parent.__evaltmp=n,e.$parent.$eval(r+"=__evaltmp")))}}),e.paginationOptions.itemsPerPage=e.defaultsPaginationOptions.itemsPerPage,e.paginationOptions.currentPage=e.defaultsPaginationOptions.currentPage,t.itemsPerPage&&(e.paginationOptions.itemsPerPage=t.itemsPerPage),t.page&&(!e.serverPagination&&(t.page-1)*e.paginationOptions.itemsPerPage>e.filtered.length?e.paginationOptions.currentPage=1:e.paginationOptions.currentPage=t.page),t.sort){var r=t.sort.split("-");e.sortOptions.predicate=decodeURIComponent(r[0]),e.sortOptions.direction=decodeURIComponent(r[1])}e.serverPagination||d()}function p(){var t="",i=a.search();Object.keys(i).forEach(function(e){t+=e+"="+i[e]+"&"}),t=t.slice(0,-1),!t&&e.sortOptions.predicate?e.sort(e.sortOptions.predicate,!0):e._gridOptions.getData("?"+t,function(t,i){e.filtered=t,e.paginationOptions.totalItems=i})}function d(){var t=Date.now(),i=!1;e._time={},e.sortOptions.predicate&&e.sortCache&&e.sortCache.predicate===e.sortOptions.predicate&&e.sortCache.direction===e.sortOptions.direction?(e.filtered=e.sortCache.data.slice(),i=!0):e.filtered=e._gridOptions.data.slice(),e._time.copy=Date.now()-t;var r=Date.now();g(),e._time.filters=Date.now()-r;var a=Date.now();e.sortOptions.predicate&&!i&&(e.filtered=n("orderBy")(e.filtered,e.sortOptions.predicate,"desc"===e.sortOptions.direction),e.sortCache={data:e.filtered.slice(),predicate:e.sortOptions.predicate,direction:e.sortOptions.direction}),e._time.sort=Date.now()-a,e._time.all=Date.now()-t,e.paginationOptions.totalItems=e.filtered.length}function g(){e.filters.forEach(function(t){var i=t.filterBy,r=t.model,n=t.isInScope?e.$eval(r):e.$parent.$eval(r),a=t.filterType;if(e.customFilters[r])e.filtered=e.customFilters[r](e.filtered,n,i);else if(n&&a){var s=o.getFilterByType(a);s&&(e.filtered=s(e.filtered,n,i))}})}e._gridOptions=e.$eval(r.attr("grid-options")),e._gridActions=e.$eval(r.attr("grid-actions")),e.serverPagination="true"===r.attr("server-pagination"),e.getDataDelay=r.attr("get-delay")||350,e._gridActions||(e.$parent.$eval(r.attr("grid-actions")+"= {}"),e._gridActions=e.$parent.$eval(r.attr("grid-actions"))),e._gridOptions.grid=e,e.filtered=e._gridOptions.data.slice(),e.paginationOptions=e._gridOptions.pagination?angular.copy(e._gridOptions.pagination):{},e.defaultsPaginationOptions={itemsPerPage:e.paginationOptions.itemsPerPage,currentPage:e.paginationOptions.currentPage||1},e.paginationOptions=angular.copy(e.defaultsPaginationOptions),e.sortOptions=e._gridOptions.sort?angular.copy(e._gridOptions.sort):{},e.customFilters=e._gridOptions.customFilters?angular.copy(e._gridOptions.customFilters):{},e.urlSync=e._gridOptions.urlSync,e.$watchCollection("_gridOptions.data",function(i){i&&i.length>-1&&(e.sortCache={},e.filtered=e._gridOptions.data.slice(),e.filters.forEach(function(i){"select"===i.filterType&&(e[i.model+"Options"]=t(e.filtered,i.filterBy))}),e.urlSync?l():d())}),e.sort=function(t,i){if(!i){var r=e.sortOptions.predicate===t&&"desc"===e.sortOptions.direction?"asc":"desc";e.sortOptions.direction=r,e.sortOptions.predicate=t}e.paginationOptions.currentPage=1,e.reloadGrid(i)},e.filter=function(){e.paginationOptions.currentPage=1,e.reloadGrid()},e.$on("$locationChangeSuccess",function(){s()}),e.$on("$stateChangeSuccess",function(t,e){s()}),e.reloadGrid=function(t){e.urlSync||e.serverPagination?c(t):d(),i.$broadcast("gridReloaded")},e._gridActions.refresh=e.reloadGrid,e._gridActions.filter=e.filter,e._gridActions.sort=e.sort}]).directive("gridItem",["$compile",function(t){return{restrict:"EA",terminal:!0,scope:!1,link:function(e,i,r,n,a){e.serverPagination?i.attr("ng-repeat","item in filtered"):i.attr("ng-repeat","item in filtered | startFrom:(paginationOptions.currentPage-1)*paginationOptions.itemsPerPage | limitTo:paginationOptions.itemsPerPage track by $index"),i.removeAttr("grid-item");var o=i[0].outerHTML;i.replaceWith(t(o)(e))}}}]).directive("gridData",["$compile","$animate",function(e){return{restrict:"EA",scope:!0,controller:"gridController",link:function(i,r,n){var a=[],o=r.parent(),s=n.id,c="true"===n.serverPagination;i.serverPagination=c,angular.forEach(angular.element(o[0].querySelectorAll("[sortable]")),function(t){var r=angular.element(t),n=r.attr("sortable");r.attr("ng-class","{'sort-ascent' : sortOptions.predicate ==='"+n+"' && sortOptions.direction === 'asc', 'sort-descent' : sortOptions.predicate === '"+n+"' && sortOptions.direction === 'desc'}"),r.attr("ng-click","sort('"+n+"')"),e(r)(i)}),angular.forEach(document.querySelectorAll("[filter-by]"),function(e){var n=angular.element(e),o=n.attr("filter-by"),c=document.querySelectorAll("[grid-data]")[0],l=c.querySelectorAll('[filter-by="'+o+'"]').length>0,p=n.attr("filter-type")||"",d=n.attr("ng-model"),g=n.attr("disable-url");s&&n.attr("grid-id")&&s!=n.attr("grid-id")||("select"!==p||(i[d+"Options"]=t(i.$eval(r.attr("grid-options")+".data"),o)),!~p.indexOf("date")||n.attr("ng-focus")||n.attr("ng-blur")||(n.attr("ng-focus","filter('{"+d+" : this."+d+"}')"),n.attr("ng-blur","filter('{"+d+" : this."+d+"}')")),d||(d=o,n.attr("ng-model",o),n.attr("ng-change","filter()")),a.push({model:d,isInScope:l,filterBy:o,filterType:p,disableUrl:g}))}),i.filters=a}}}]).factory("filtersFactory",function(){function t(t,e,i){return t.filter(function(t){return!e||!t[i]||t[i]===e})}function e(t,e,i){return t.filter(function(t){return e&&t[i]?~(t[i]+"").toLowerCase().indexOf((e+"").toLowerCase()):!!t[i]})}function i(t,e,i){return e=new Date(e).getTime(),t.filter(function(t){return!e||!t[i]||t[i]<=e+86399999})}function r(t,e,i){return e=new Date(e).getTime(),t.filter(function(t){return!e||!t[i]||t[i]>=e})}return{getFilterByType:function(n){switch(n){case"select":return t;case"text":return e;case"dateTo":return i;case"dateFrom":return r;default:return null}}}})}();
\ No newline at end of file
diff --git a/src/js/dataGrid.js b/src/js/dataGrid.js
index bc5cfb5..d7ddb3f 100644
--- a/src/js/dataGrid.js
+++ b/src/js/dataGrid.js
@@ -279,9 +279,6 @@
                         urlName = filter.model,
                         value = filter.isInScope ? $scope.$eval(urlName) : $scope.$parent.$eval(urlName),
                         type = filter.filterType;
-                    if(type === 'select') {
-                        $scope.filtered = $scope._gridOptions.data.slice();
-                    }
                     if ($scope.customFilters[urlName]) {
                         $scope.filtered = $scope.customFilters[urlName]($scope.filtered, value, predicate);
                     } else if (value && type) {

From 2aab4076370b54c9f7a8249c768d24d17a9370e6 Mon Sep 17 00:00:00 2001
From: Andrey Chayko <chaiko.work@gmail.com>
Date: Fri, 29 Sep 2017 16:30:09 +0300
Subject: [PATCH 39/39] Fixed 100k sample. Added itemsPerPage option to sample
 controller

---
 demo/100k/js/demoApp.js | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/demo/100k/js/demoApp.js b/demo/100k/js/demoApp.js
index 34bc386..47d6e5c 100644
--- a/demo/100k/js/demoApp.js
+++ b/demo/100k/js/demoApp.js
@@ -6,7 +6,10 @@
 
             $scope.gridOptions = {
                 data: [],
-                urlSync: true
+                urlSync: true,
+                pagination: {
+                    itemsPerPage: '10'
+                }
             };
 
             $http({