From 290ae745b0537c7c8fd1635c7b1b8172c7e0afe2 Mon Sep 17 00:00:00 2001
From: "Zhuk, Alexander" <Alexander.Zhuk@landsend.com>
Date: Thu, 3 Mar 2016 14:27:41 +0300
Subject: [PATCH 01/53] multiple grids example texts

---
 README.md                    | 12 ++----------
 demo/bootstrap/multiple.html |  3 ++-
 2 files changed, 4 insertions(+), 11 deletions(-)

diff --git a/README.md b/README.md
index 91cdfae..39290e2 100644
--- a/README.md
+++ b/README.md
@@ -13,7 +13,7 @@ Demo 100k: http://angular-data-grid.github.io/demo/100k/
  - 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. 
  - 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 carefully.
+ NOTE! With great power comes great responsibility, so use non-isolated API wisely.
 
 ### Installation
 
@@ -80,14 +80,6 @@ angular.module('myApp', ['dataGrid', 'pagination'])
                 sort: {
                     predicate: 'companyName',
                     direction: 'asc'
-                },
-                //optional parameter - custom rules for filters (see explanation below)
-                customFilters: {
-                    startFrom: function (items, value, predicate) {
-                        return items.filter(function (item) {
-                            return value && item[predicate] ? !item[predicate].toLowerCase().indexOf(value.toLowerCase()) : true;
-                        });
-                    }
                 }
                 };
 ```
@@ -234,4 +226,4 @@ 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. 
 
-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.
+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)
diff --git a/demo/bootstrap/multiple.html b/demo/bootstrap/multiple.html
index a1bcaf7..35f4cce 100644
--- a/demo/bootstrap/multiple.html
+++ b/demo/bootstrap/multiple.html
@@ -20,7 +20,8 @@
 <div class="container">
     <div>
         <h3>Angular Data Grid - Multiple Grids Example</h3>
-        Do not forget to assign <code>id</code> attribute for each grid instance on a page to make them work simultaneously. Otherwise grids will share sorting and filtering actions.<br>
+        You need to assign <code>id</code> attribute for each grid instance on a page to make them work simultaneously. If you use external filtering, assign <code>grid-id</code> to id and <code>ng-change</code> to associated
+        <code>gridActions</code> (see example below).
         <a href="https://github.com/angular-data-grid/angular-data-grid.github.io" target="_blank">Project GitHub</a>
     </div>
     <hr>

From b7313b6295b3cc8e7600c539f8e9aed97631509c Mon Sep 17 00:00:00 2001
From: "Zhuk, Alexander" <Alexander.Zhuk@landsend.com>
Date: Thu, 3 Mar 2016 15:46:52 +0300
Subject: [PATCH 02/53] adding NOTE about 'grid-item' wrapper directive

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

diff --git a/README.md b/README.md
index 39290e2..29239c1 100644
--- a/README.md
+++ b/README.md
@@ -84,6 +84,8 @@ angular.module('myApp', ['dataGrid', 'pagination'])
                 };
 ```
 
+NOTE: `grid-item` wrapper used in the code example above, to make code more concise - you can use regular 'ng-repeat' instead if needed.
+
 ### Basic API
 
 1. `grid-options`: object in your controller with start options for grid. You must create this object with at least 1 required parameter - data.

From ab1d19e9e6bf349b866174177cf841598a03b8c2 Mon Sep 17 00:00:00 2001
From: "Zhuk, Alexander" <Alexander.Zhuk@landsend.com>
Date: Thu, 3 Mar 2016 15:48:02 +0300
Subject: [PATCH 03/53] adding NOTE about 'grid-item' wrapper directive2

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

diff --git a/README.md b/README.md
index 29239c1..0216edd 100644
--- a/README.md
+++ b/README.md
@@ -84,7 +84,7 @@ angular.module('myApp', ['dataGrid', 'pagination'])
                 };
 ```
 
-NOTE: `grid-item` wrapper used in the code 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 76cf3fbc2f1d00819a95640d5a4586312e74ff82 Mon Sep 17 00:00:00 2001
From: "Zhuk, Alexander" <Alexander.Zhuk@landsend.com>
Date: Thu, 3 Mar 2016 16:39:12 +0300
Subject: [PATCH 04/53] adding NPM INSTALL support and updated descriptions

---
 README.md                    | 12 ++++++------
 demo/bootstrap/multiple.html |  2 +-
 package.json                 | 28 ++++++++++++++++++++++++++--
 3 files changed, 33 insertions(+), 9 deletions(-)

diff --git a/README.md b/README.md
index 0216edd..6eaf9a7 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.
+seamless synchronization with browser address bar and total freedom in mark-up and styling suitable for your application. Angular 1.3 - 1.5 compliant.
 
 Demo Bootstrap: http://angular-data-grid.github.io/demo/bootstrap/
 
@@ -156,7 +156,7 @@ Directive is built on a base of excellent [Angular UI](https://angular-ui.github
 </pagination>
 ```
 
-Settings can be provided as attributes in the <pagination> or globally configured through the paginationConfig.
+Settings can be provided as attributes in the <pagination> or globally configured through the `paginationConfig`.
 
  ```ng-change``` : ng-change can be used together with ng-model to call a function whenever the page changes.
 
@@ -190,8 +190,8 @@ Settings can be provided as attributes in the <pagination> or globally configure
 
 ### Filters
 Data Grid supports 4 built-in types of filters: `text`, `select`, `dateFrom` and `dateTo`. 
-To use it, add attribute `filter-by` to any element and pass property name, which you want filtering. 
-Also you need add attribute `filter-type` with type of filter. 
+To use it, add attribute `filter-by` to any element and pass property name, which you want to be filtered. 
+Also you need add attribute `filter-type` with type of filter.
 After that you need call `filter()` method in `ng-change` for text or select inputs and in `ng-blur/ng-focus` for datepickers. 
 Filters are synchronized with URL by `ng-model` value.
 
@@ -207,7 +207,7 @@ Filters are synchronized with URL by `ng-model` value.
 ```
 
 ### Custom Filters
-If you need use some custom filters (f.e. filter by first letter), add `filter-by` to specify property name, which you want filtering and add `ng-model` property. 
+If you need to use some custom filters (e.g. filter by first letter), add `filter-by` to specify property name, which you want filtering and add `ng-model` property. 
 Then create in `gridOptions.customFilters` variable named as `ng-model` with filtering function. Filtering function accepts items, value, predicate arguments and returns filtered array.
 
 ```javascript
@@ -228,4 +228,4 @@ 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. 
 
-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)
+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)
diff --git a/demo/bootstrap/multiple.html b/demo/bootstrap/multiple.html
index 35f4cce..d313957 100644
--- a/demo/bootstrap/multiple.html
+++ b/demo/bootstrap/multiple.html
@@ -20,7 +20,7 @@
 <div class="container">
     <div>
         <h3>Angular Data Grid - Multiple Grids Example</h3>
-        You need to assign <code>id</code> attribute for each grid instance on a page to make them work simultaneously. If you use external filtering, assign <code>grid-id</code> to id and <code>ng-change</code> to associated
+        You need to assign <code>id</code> attribute for each grid instance on a page to make them work simultaneously. If you use external filtering, assign <code>grid-id</code> to grid id and <code>ng-change</code> to associated
         <code>gridActions</code> (see example below).
         <a href="https://github.com/angular-data-grid/angular-data-grid.github.io" target="_blank">Project GitHub</a>
     </div>
diff --git a/package.json b/package.json
index e91cc83..3e5963a 100644
--- a/package.json
+++ b/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "data-grid",
+  "name": "angular-data-grid",
   "version": "0.1.0",
   "scripts": {
     "start": "gulp serve",
@@ -13,5 +13,29 @@
     "gulp-rimraf": "*",
     "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.",
+  "main": "index.html",
+  "devDependencies": {},
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/angular-data-grid/angular-data-grid.github.io.git"
+  },
+  "keywords": [
+    "angular data grid",
+    "data grid",
+    "data grid for angular",
+    "ng-data-grid",
+    "ng-table",
+    "angular table",
+    "bootstra data grid",
+    "material design grid",
+    "data table"
+  ],
+  "author": "Alexander Zhuk <alexander.zhuk83@gmail.com> (https://github.com/angular-data-grid/angular-data-grid.github.io)",
+  "license": "ISC",
+  "bugs": {
+    "url": "https://github.com/angular-data-grid/angular-data-grid.github.io/issues"
+  },
+  "homepage": "https://github.com/angular-data-grid/angular-data-grid.github.io#readme"
 }

From 425c63ce2c6511dd71a7bfa0627cd0ccfe6b5e11 Mon Sep 17 00:00:00 2001
From: AlexZ <alexanderzhuk@coherentsolutions.com>
Date: Thu, 3 Mar 2016 16:40:18 +0300
Subject: [PATCH 05/53] Update README.md

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

diff --git a/README.md b/README.md
index 6eaf9a7..8baf5fe 100644
--- a/README.md
+++ b/README.md
@@ -19,6 +19,8 @@ Demo 100k: http://angular-data-grid.github.io/demo/100k/
 
 Using Bower: `bower install angular-data-grid`
 
+Using NPM: `npm install angular-data-grid`
+
 Direct download: get ZIP archive [from here](https://github.com/angular-data-grid/angular-data-grid.github.io/archive/master.zip)
  
 Then use files from *dist* folder (see below).

From 7d8ec4ae9c42d77f32154820a0b77dc1995d7e27 Mon Sep 17 00:00:00 2001
From: "Zhuk, Alexander" <Alexander.Zhuk@landsend.com>
Date: Tue, 26 Apr 2016 13:23:57 +0300
Subject: [PATCH 06/53] fixing Angular Material select filter issue

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

diff --git a/dist/dataGrid.js b/dist/dataGrid.js
index 94666e8..7586454 100644
--- a/dist/dataGrid.js
+++ b/dist/dataGrid.js
@@ -276,6 +276,8 @@
         .directive('gridData', ['$compile', '$animate', function ($compile) {
             return {
                 restrict: 'EA',
+                //transclude: true,
+                //replace: true,
                 scope: true,
                 controller: 'gridController',
                 link: function ($scope, $element, attrs) {
@@ -319,11 +321,13 @@
                             && !element.attr('ng-blur')) {
                             element.attr('ng-focus', "filter('{" + urlName + " : " + "this." + urlName + "}')");
                             element.attr('ng-blur', "filter('{" + urlName + " : " + "this." + urlName + "}')");
+                            //$compile(element)($scope);
                         }
                         if (!urlName) {
                             urlName = predicate;
                             element.attr('ng-model', predicate);
                             element.attr('ng-change', 'filter()');
+                            //$compile(element)($scope);
                         }
 
                         filters.push({
@@ -333,8 +337,6 @@
                             filterType: filterType,
                             disableUrl: disableUrl
                         });
-
-                        $compile(element)($scope);
                     });
 
                     angular.forEach(angular.element(directiveElement[0].querySelectorAll('[grid-item]')), function (row) {
diff --git a/dist/dataGrid.min.js b/dist/dataGrid.min.js
index f745d92..b6d1420 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(){var t,i=!1;t="page="+e.paginationOptions.currentPage,e.paginationOptions.itemsPerPage!==e.defaultsPaginationOptions.itemsPerPage&&(t+="&itemsPerPage="+e.paginationOptions.itemsPerPage),e.sortOptions.predicate&&(t+="&sort="+encodeURIComponent(e.sortOptions.predicate+"-"+e.sortOptions.direction)),e.filters.forEach(function(r){var n=r.model,a=e.$eval(n);if(r.disableUrl)return void(i=!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}t+="&"+encodeURIComponent(n)+"="+encodeURIComponent(a)}}),i&&c(),n.path(t)}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&&(e.__evaltmp=n,e.$eval(i+"=__evaltmp"))}}),e.serverPagination||p(),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);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=e.$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){var i=e.sortOptions.predicate===t&&"desc"===e.sortOptions.direction?"asc":"desc";e.sortOptions.predicate=t,e.sortOptions.direction=i,e.paginationOptions.currentPage=1,e.reloadGrid()},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(){e.urlSync||e.serverPagination?o():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(n){var a=angular.element(n),s=l.find(a).length>0,p=a.attr("filter-by"),g=a.attr("filter-type")||"",d=a.attr("ng-model"),u=a.attr("disable-url");c&&a.attr("grid-id")&&c!=a.attr("grid-id")||("select"!==g||(i[d+"Options"]=t(i.$eval(r.attr("grid-options")+".data"),p)),!~g.indexOf("date")||a.attr("ng-focus")||a.attr("ng-blur")||(a.attr("ng-focus","filter('{"+d+" : this."+d+"}')"),a.attr("ng-blur","filter('{"+d+" : this."+d+"}')")),d||(d=p,a.attr("ng-model",p),a.attr("ng-change","filter()")),o.push({model:d,isInScope:s,filterBy:p,filterType:g,disableUrl:u}),e(a)(i))}),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()):!0})}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(){var t,i=!1;t="page="+e.paginationOptions.currentPage,e.paginationOptions.itemsPerPage!==e.defaultsPaginationOptions.itemsPerPage&&(t+="&itemsPerPage="+e.paginationOptions.itemsPerPage),e.sortOptions.predicate&&(t+="&sort="+encodeURIComponent(e.sortOptions.predicate+"-"+e.sortOptions.direction)),e.filters.forEach(function(r){var n=r.model,a=e.$eval(n);if(r.disableUrl)return void(i=!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}t+="&"+encodeURIComponent(n)+"="+encodeURIComponent(a)}}),i&&c(),n.path(t)}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&&(e.__evaltmp=n,e.$eval(i+"=__evaltmp"))}}),e.serverPagination||p(),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);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=e.$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){var i=e.sortOptions.predicate===t&&"desc"===e.sortOptions.direction?"asc":"desc";e.sortOptions.predicate=t,e.sortOptions.direction=i,e.paginationOptions.currentPage=1,e.reloadGrid()},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(){e.urlSync||e.serverPagination?o():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=l.find(n).length>0,s=n.attr("filter-by"),p=n.attr("filter-type")||"",g=n.attr("ng-model"),d=n.attr("disable-url");c&&n.attr("grid-id")&&c!=n.attr("grid-id")||("select"!==p||(i[g+"Options"]=t(i.$eval(r.attr("grid-options")+".data"),s)),!~p.indexOf("date")||n.attr("ng-focus")||n.attr("ng-blur")||(n.attr("ng-focus","filter('{"+g+" : this."+g+"}')"),n.attr("ng-blur","filter('{"+g+" : this."+g+"}')")),g||(g=s,n.attr("ng-model",s),n.attr("ng-change","filter()")),o.push({model:g,isInScope:a,filterBy:s,filterType:p,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()):!0})}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 89bccc4..7586454 100644
--- a/src/js/dataGrid.js
+++ b/src/js/dataGrid.js
@@ -337,8 +337,6 @@
                             filterType: filterType,
                             disableUrl: disableUrl
                         });
-
-                        $compile(element)($scope);
                     });
 
                     angular.forEach(angular.element(directiveElement[0].querySelectorAll('[grid-item]')), function (row) {

From dbb495ec28e33581d3146b5dfcf7c2d09898ce00 Mon Sep 17 00:00:00 2001
From: Igor Korshuk <Igor.Korshuk@landsend.com>
Date: Thu, 19 May 2016 16:13:04 +0300
Subject: [PATCH 07/53] #11 Text based filter does not filter out empty/null
 values

---
 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 7586454..a5bdfeb 100644
--- a/dist/dataGrid.js
+++ b/dist/dataGrid.js
@@ -365,7 +365,7 @@
 
             function textFilter(items, value, predicate) {
                 return items.filter(function (item) {
-                    return value && item[predicate] ? ~(item[predicate] + '').toLowerCase().indexOf((value + '').toLowerCase()) : true;
+                    return value && item[predicate] ? ~(item[predicate] + '').toLowerCase().indexOf((value + '').toLowerCase()) : !!item[predicate];
                 });
             }
 
diff --git a/dist/dataGrid.min.js b/dist/dataGrid.min.js
index b6d1420..e9c6a48 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(){var t,i=!1;t="page="+e.paginationOptions.currentPage,e.paginationOptions.itemsPerPage!==e.defaultsPaginationOptions.itemsPerPage&&(t+="&itemsPerPage="+e.paginationOptions.itemsPerPage),e.sortOptions.predicate&&(t+="&sort="+encodeURIComponent(e.sortOptions.predicate+"-"+e.sortOptions.direction)),e.filters.forEach(function(r){var n=r.model,a=e.$eval(n);if(r.disableUrl)return void(i=!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}t+="&"+encodeURIComponent(n)+"="+encodeURIComponent(a)}}),i&&c(),n.path(t)}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&&(e.__evaltmp=n,e.$eval(i+"=__evaltmp"))}}),e.serverPagination||p(),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);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=e.$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){var i=e.sortOptions.predicate===t&&"desc"===e.sortOptions.direction?"asc":"desc";e.sortOptions.predicate=t,e.sortOptions.direction=i,e.paginationOptions.currentPage=1,e.reloadGrid()},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(){e.urlSync||e.serverPagination?o():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=l.find(n).length>0,s=n.attr("filter-by"),p=n.attr("filter-type")||"",g=n.attr("ng-model"),d=n.attr("disable-url");c&&n.attr("grid-id")&&c!=n.attr("grid-id")||("select"!==p||(i[g+"Options"]=t(i.$eval(r.attr("grid-options")+".data"),s)),!~p.indexOf("date")||n.attr("ng-focus")||n.attr("ng-blur")||(n.attr("ng-focus","filter('{"+g+" : this."+g+"}')"),n.attr("ng-blur","filter('{"+g+" : this."+g+"}')")),g||(g=s,n.attr("ng-model",s),n.attr("ng-change","filter()")),o.push({model:g,isInScope:a,filterBy:s,filterType:p,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()):!0})}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(){var t,i=!1;t="page="+e.paginationOptions.currentPage,e.paginationOptions.itemsPerPage!==e.defaultsPaginationOptions.itemsPerPage&&(t+="&itemsPerPage="+e.paginationOptions.itemsPerPage),e.sortOptions.predicate&&(t+="&sort="+encodeURIComponent(e.sortOptions.predicate+"-"+e.sortOptions.direction)),e.filters.forEach(function(r){var n=r.model,a=e.$eval(n);if(r.disableUrl)return void(i=!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}t+="&"+encodeURIComponent(n)+"="+encodeURIComponent(a)}}),i&&c(),n.path(t)}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&&(e.__evaltmp=n,e.$eval(i+"=__evaltmp"))}}),e.serverPagination||p(),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);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=e.$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){var i=e.sortOptions.predicate===t&&"desc"===e.sortOptions.direction?"asc":"desc";e.sortOptions.predicate=t,e.sortOptions.direction=i,e.paginationOptions.currentPage=1,e.reloadGrid()},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(){e.urlSync||e.serverPagination?o():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=l.find(n).length>0,s=n.attr("filter-by"),p=n.attr("filter-type")||"",g=n.attr("ng-model"),d=n.attr("disable-url");c&&n.attr("grid-id")&&c!=n.attr("grid-id")||("select"!==p||(i[g+"Options"]=t(i.$eval(r.attr("grid-options")+".data"),s)),!~p.indexOf("date")||n.attr("ng-focus")||n.attr("ng-blur")||(n.attr("ng-focus","filter('{"+g+" : this."+g+"}')"),n.attr("ng-blur","filter('{"+g+" : this."+g+"}')")),g||(g=s,n.attr("ng-model",s),n.attr("ng-change","filter()")),o.push({model:g,isInScope:a,filterBy:s,filterType:p,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
diff --git a/src/js/dataGrid.js b/src/js/dataGrid.js
index 7586454..a5bdfeb 100644
--- a/src/js/dataGrid.js
+++ b/src/js/dataGrid.js
@@ -365,7 +365,7 @@
 
             function textFilter(items, value, predicate) {
                 return items.filter(function (item) {
-                    return value && item[predicate] ? ~(item[predicate] + '').toLowerCase().indexOf((value + '').toLowerCase()) : true;
+                    return value && item[predicate] ? ~(item[predicate] + '').toLowerCase().indexOf((value + '').toLowerCase()) : !!item[predicate];
                 });
             }
 

From 763b390c3af47cee50eb6790c607f09324cb1d12 Mon Sep 17 00:00:00 2001
From: skozlov <sergey.kozlovich@landsend.com>
Date: Tue, 7 Jun 2016 13:18:32 +0300
Subject: [PATCH 08/53] Init commit

---
 demo/bootstrap/js/serverPaginationApp.js | 38 ++++++++++
 demo/bootstrap/server-pagination.html    | 88 ++++++++++++++++++++++++
 dist/dataGrid.js                         |  2 +-
 src/js/dataGrid.js                       |  2 +-
 4 files changed, 128 insertions(+), 2 deletions(-)
 create mode 100644 demo/bootstrap/js/serverPaginationApp.js
 create mode 100644 demo/bootstrap/server-pagination.html

diff --git a/demo/bootstrap/js/serverPaginationApp.js b/demo/bootstrap/js/serverPaginationApp.js
new file mode 100644
index 0000000..d814962
--- /dev/null
+++ b/demo/bootstrap/js/serverPaginationApp.js
@@ -0,0 +1,38 @@
+(function () {
+    'use strict';
+
+    angular
+        .module('myApp', ['ui.bootstrap', 'dataGrid', 'pagination'])
+        .controller('myAppController', MyAppController)
+        .factory('myAppFactory', MyAppFactory);
+
+    MyAppController.$inject = ['$scope', 'myAppFactory'];
+    MyAppFactory.$inject = ['$http'];
+
+    function MyAppController($scope, myAppFactory) {
+
+        $scope.gridOptions = {
+            data: [],
+            getData: myAppFactory.getUsersData,
+            sort: {
+                predicate: 'name',
+                direction: 'asc'
+            }
+        };
+        $scope.gridActions = {};
+
+    }
+
+    function MyAppFactory($http) {
+        var herokuDomain = 'https://server-pagination.herokuapp.com';
+        return {
+            getUsersData: getUsersData
+        };
+
+        function getUsersData(params, callback) {
+            $http.get(herokuDomain + '/users' + params).success(function (response) {
+                callback(response.users, response.usersCount);
+            });
+        }
+    }
+})();
diff --git a/demo/bootstrap/server-pagination.html b/demo/bootstrap/server-pagination.html
new file mode 100644
index 0000000..957a7d3
--- /dev/null
+++ b/demo/bootstrap/server-pagination.html
@@ -0,0 +1,88 @@
+<!-- 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>
+    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css"><!-- load bootstrap -->
+</head>
+<body ng-controller="myAppController">
+<div class="container">
+    <div class="row">
+        <div class="col-md-6">
+            <div class="form-group">
+                <label class="control-label">Filter by Name</label>
+                <input type="text" class="form-control order-search-box"
+                       placeholder="Search By name"
+                       ng-change="gridActions.filter()"
+                       ng-model="name"
+                       filter-by="name"
+                       filter-type="text">
+            </div>
+        </div>
+    </div>
+    <div grid-data grid-options="gridOptions" grid-actions="gridActions" server-pagination="true">
+        <table class="table table-bordered">
+            <thead>
+            <tr>
+                <th sortable="name" class="sortable">Name</th>
+                <th sortable="surname" class="sortable">Surname</th>
+            </tr>
+            </thead>
+            <tbody>
+            <tr grid-item>
+                <td>{{item.name}}</td>
+                <td>{{item.surname}}</td>
+            </tr>
+            </tbody>
+        </table>
+        <div grid-pagination max-size="5" boundary-links="true"
+             ng-if="paginationOptions.totalItems  > paginationOptions.itemsPerPage"
+             total-items="paginationOptions.totalItems"
+             ng-model="paginationOptions.currentPage"
+             ng-change="reloadGrid()"
+             items-per-page="paginationOptions.itemsPerPage">
+        </div>
+        <div class="row">
+            <div class="col-md-6">
+                <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>
+            </div>
+        </div>
+    </div>
+</div>
+</body>
+
+<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script><!-- load jquery -->
+<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script><!-- load angular -->
+<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.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="../../dist/pagination.js"></script>
+<script src="../../dist/dataGrid.js"></script>
+<script src="js/serverPaginationApp.js"></script>
+</html>
\ No newline at end of file
diff --git a/dist/dataGrid.js b/dist/dataGrid.js
index a5bdfeb..5ce3549 100644
--- a/dist/dataGrid.js
+++ b/dist/dataGrid.js
@@ -329,7 +329,7 @@
                             element.attr('ng-change', 'filter()');
                             //$compile(element)($scope);
                         }
-
+                        $compile(element)($scope);
                         filters.push({
                             model: urlName,
                             isInScope: isInScope,
diff --git a/src/js/dataGrid.js b/src/js/dataGrid.js
index a5bdfeb..5ce3549 100644
--- a/src/js/dataGrid.js
+++ b/src/js/dataGrid.js
@@ -329,7 +329,7 @@
                             element.attr('ng-change', 'filter()');
                             //$compile(element)($scope);
                         }
-
+                        $compile(element)($scope);
                         filters.push({
                             model: urlName,
                             isInScope: isInScope,

From d7c3bf891f53324c822dddd5c2e9bccaf368d303 Mon Sep 17 00:00:00 2001
From: skozlov <sergey.kozlovich@landsend.com>
Date: Thu, 9 Jun 2016 14:17:36 +0300
Subject: [PATCH 09/53] Order server pagination

---
 demo/bootstrap/js/serverPaginationApp.js |  11 +-
 demo/bootstrap/server-pagination.html    | 175 ++++++++++++++++++-----
 2 files changed, 147 insertions(+), 39 deletions(-)

diff --git a/demo/bootstrap/js/serverPaginationApp.js b/demo/bootstrap/js/serverPaginationApp.js
index d814962..a88ef6a 100644
--- a/demo/bootstrap/js/serverPaginationApp.js
+++ b/demo/bootstrap/js/serverPaginationApp.js
@@ -13,25 +13,24 @@
 
         $scope.gridOptions = {
             data: [],
-            getData: myAppFactory.getUsersData,
+            getData: myAppFactory.getOrdersData,
             sort: {
                 predicate: 'name',
                 direction: 'asc'
             }
         };
         $scope.gridActions = {};
-
     }
 
     function MyAppFactory($http) {
         var herokuDomain = 'https://server-pagination.herokuapp.com';
         return {
-            getUsersData: getUsersData
+            getOrdersData: getOrdersData
         };
 
-        function getUsersData(params, callback) {
-            $http.get(herokuDomain + '/users' + params).success(function (response) {
-                callback(response.users, response.usersCount);
+        function getOrdersData(params, callback) {
+            $http.get(herokuDomain + '/orders' + params).success(function (response) {
+                callback(response.orders, response.ordersCount);
             });
         }
     }
diff --git a/demo/bootstrap/server-pagination.html b/demo/bootstrap/server-pagination.html
index 957a7d3..19e58b2 100644
--- a/demo/bootstrap/server-pagination.html
+++ b/demo/bootstrap/server-pagination.html
@@ -19,69 +19,178 @@
             vertical-align: top;
         }
     </style>
-    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css"><!-- load 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">
 </head>
 <body ng-controller="myAppController">
 <div class="container">
+    <hr>
     <div class="row">
-        <div class="col-md-6">
-            <div class="form-group">
-                <label class="control-label">Filter by Name</label>
-                <input type="text" class="form-control order-search-box"
-                       placeholder="Search By name"
-                       ng-change="gridActions.filter()"
-                       ng-model="name"
-                       filter-by="name"
-                       filter-type="text">
+        <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 sortable="name" class="sortable">Name</th>
-                <th sortable="surname" class="sortable">Surname</th>
+                <th sortable="orderNo" class="sortable">Order #</th>
+                <th sortable="datePlaced" class="sortable">Date Placed</th>
+                <th sortable="status" class="sortable">Statuses</th>
+                <th sortable="amount" class="sortable">Total</th>
             </tr>
             </thead>
             <tbody>
             <tr grid-item>
-                <td>{{item.name}}</td>
-                <td>{{item.surname}}</td>
+                <td>{{item.orderNo}}</td>
+                <td>{{item.datePlaced | date:'MM/dd/yyyy'}}</td>
+                <td>{{item.status}}</td>
+                <td>{{item.total}}</td>
             </tr>
             </tbody>
         </table>
-        <div grid-pagination max-size="5" boundary-links="true"
-             ng-if="paginationOptions.totalItems  > paginationOptions.itemsPerPage"
-             total-items="paginationOptions.totalItems"
-             ng-model="paginationOptions.currentPage"
-             ng-change="reloadGrid()"
-             items-per-page="paginationOptions.itemsPerPage">
-        </div>
         <div class="row">
-            <div class="col-md-6">
-                <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>
+            <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>
+
 </body>
 
 <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script><!-- load jquery -->
-<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script><!-- load angular -->
-<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.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="../../dist/pagination.js"></script>
 <script src="../../dist/dataGrid.js"></script>
 <script src="js/serverPaginationApp.js"></script>

From 271576f99a7c62b04d96baea7f7124370d2e45e2 Mon Sep 17 00:00:00 2001
From: skozlov <sergey.kozlovich@landsend.com>
Date: Thu, 9 Jun 2016 18:07:49 +0300
Subject: [PATCH 10/53] Filter input is fixed

---
 src/js/dataGrid.js | 17 +++++++++++------
 1 file changed, 11 insertions(+), 6 deletions(-)

diff --git a/src/js/dataGrid.js b/src/js/dataGrid.js
index 5ce3549..6fa8ff7 100644
--- a/src/js/dataGrid.js
+++ b/src/js/dataGrid.js
@@ -107,7 +107,7 @@
                 //custom filters
                 $scope.filters.forEach(function (filter) {
                     var urlName = filter.model,
-                        value = $scope.$eval(urlName);
+                        value = filter.isInScope ? $scope.$eval(urlName) : $scope.$parent.$eval(urlName);
 
                     if (filter.disableUrl) {
                         needApplyFilters = true;
@@ -173,8 +173,13 @@
                     }
 
                     if (value) {
-                        $scope.__evaltmp = value;
-                        $scope.$eval(urlName + '=__evaltmp');
+                        if (filter.isInScope) {
+                            $scope.__evaltmp = value;
+                            $scope.$eval(urlName + '=__evaltmp');
+                        } else {
+                            $scope.$parent.__evaltmp = value;
+                            $scope.$parent.$eval(urlName + '=__evaltmp');
+                        }
                     }
                 });
 
@@ -260,7 +265,7 @@
                 $scope.filters.forEach(function (filter) {
                     var predicate = filter.filterBy,
                         urlName = filter.model,
-                        value = $scope.$eval(urlName),
+                        value = filter.isInScope ? $scope.$eval(urlName) : $scope.$parent.$eval(urlName),
                         type = filter.filterType;
                     if ($scope.customFilters[urlName]) {
                         $scope.filtered = $scope.customFilters[urlName]($scope.filtered, value, predicate);
@@ -302,7 +307,7 @@
 
                     angular.forEach(angular.element(document.querySelectorAll('[filter-by]')), function (filter) {
                         var element = angular.element(filter),
-                            isInScope = directiveElement.find(element).length > 0,
+                            isInScope = $element.find(element).length > 0,
                             predicate = element.attr('filter-by'),
                             filterType = element.attr('filter-type') || '',
                             urlName = element.attr('ng-model'),
@@ -329,7 +334,7 @@
                             element.attr('ng-change', 'filter()');
                             //$compile(element)($scope);
                         }
-                        $compile(element)($scope);
+                        //$compile(element)($scope);
                         filters.push({
                             model: urlName,
                             isInScope: isInScope,

From 69eb586e46be46928d56cecf21e1068ce3ef43b1 Mon Sep 17 00:00:00 2001
From: skozlov <sergey.kozlovich@landsend.com>
Date: Mon, 13 Jun 2016 14:00:50 +0300
Subject: [PATCH 11/53] Were added statuses request for ordres and default
 sorting for server pagination

---
 demo/bootstrap/index.html                |  2 +-
 demo/bootstrap/js/serverPaginationApp.js | 13 +++++++++++--
 demo/bootstrap/server-pagination.html    | 19 +++++++++++++++----
 src/js/dataGrid.js                       | 22 ++++++++++++++--------
 4 files changed, 41 insertions(+), 15 deletions(-)

diff --git a/demo/bootstrap/index.html b/demo/bootstrap/index.html
index c2cf1d0..604e99b 100644
--- a/demo/bootstrap/index.html
+++ b/demo/bootstrap/index.html
@@ -168,7 +168,7 @@ <h4>Additional Demos</h4>
                                     ng-model="status"
                                     ng-change="filter()">
                                 <option value="">All Statuses</option>
-                                <option ng-repeat="option in statusOptions track by option.value"
+                                <option ng-repeat="option in UI.statusOptions track by option.value"
                                         value="{{option.value}}">{{option.text}}
                                 </option>
                             </select>
diff --git a/demo/bootstrap/js/serverPaginationApp.js b/demo/bootstrap/js/serverPaginationApp.js
index a88ef6a..dc46500 100644
--- a/demo/bootstrap/js/serverPaginationApp.js
+++ b/demo/bootstrap/js/serverPaginationApp.js
@@ -15,17 +15,22 @@
             data: [],
             getData: myAppFactory.getOrdersData,
             sort: {
-                predicate: 'name',
+                predicate: 'orderNo',
                 direction: 'asc'
             }
         };
+        $scope.UI = {};
         $scope.gridActions = {};
+        myAppFactory.getStatuses().success(function (resp) {
+            $scope.UI.statusOptions = resp;
+        });
     }
 
     function MyAppFactory($http) {
         var herokuDomain = 'https://server-pagination.herokuapp.com';
         return {
-            getOrdersData: getOrdersData
+            getOrdersData: getOrdersData,
+            getStatuses: getStatuses
         };
 
         function getOrdersData(params, callback) {
@@ -33,5 +38,9 @@
                 callback(response.orders, response.ordersCount);
             });
         }
+
+        function getStatuses() {
+            return $http.get(herokuDomain + '/orders/statuses');
+        }
     }
 })();
diff --git a/demo/bootstrap/server-pagination.html b/demo/bootstrap/server-pagination.html
index 19e58b2..40f232c 100644
--- a/demo/bootstrap/server-pagination.html
+++ b/demo/bootstrap/server-pagination.html
@@ -137,10 +137,21 @@
         <table class="table table-bordered">
             <thead>
             <tr>
-                <th sortable="orderNo" class="sortable">Order #</th>
-                <th sortable="datePlaced" class="sortable">Date Placed</th>
-                <th sortable="status" class="sortable">Statuses</th>
-                <th sortable="amount" class="sortable">Total</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"
+                            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>
diff --git a/src/js/dataGrid.js b/src/js/dataGrid.js
index 6fa8ff7..8688c79 100644
--- a/src/js/dataGrid.js
+++ b/src/js/dataGrid.js
@@ -55,10 +55,12 @@
                 }
             });
 
-            $scope.sort = function (predicate) {
-                var direction = $scope.sortOptions.predicate === predicate && $scope.sortOptions.direction === 'desc' ? 'asc' : 'desc';
-                $scope.sortOptions.predicate = predicate;
-                $scope.sortOptions.direction = direction;
+            $scope.sort = function (predicate, isDefaultSort) {
+                if (!isDefaultSort) {
+                    var direction = $scope.sortOptions.predicate === predicate && $scope.sortOptions.direction === 'desc' ? 'asc' : 'desc';
+                    $scope.sortOptions.direction = direction;
+                    $scope.sortOptions.predicate = predicate;
+                }
                 $scope.paginationOptions.currentPage = 1;
                 $scope.reloadGrid();
             };
@@ -217,10 +219,14 @@
 
             function getData() {
                 var url = $location.path().slice(1);
-                $scope._gridOptions.getData('?' + url, function (data, totalItems) {
-                    $scope.filtered = data;
-                    $scope.paginationOptions.totalItems = totalItems;
-                });
+                if (!url && $scope.sortOptions.predicate) {
+                    $scope.sort($scope.sortOptions.predicate, true);
+                } else {
+                    $scope._gridOptions.getData('?' + url, function (data, totalItems) {
+                        $scope.filtered = data;
+                        $scope.paginationOptions.totalItems = totalItems;
+                    });
+                }
                 // -> to promise
                 //$scope._gridOptions.getData('?' + url).then(function (data, totalItems) {
                 //    $scope.filtered = data;

From 38844a964285e2bd6beae5c1a78aeedf7ef78fc9 Mon Sep 17 00:00:00 2001
From: skozlov <sergey.kozlovich@landsend.com>
Date: Mon, 13 Jun 2016 14:02:57 +0300
Subject: [PATCH 12/53] Commit dist dataGrid.js

---
 dist/dataGrid.js     | 39 +++++++++++++++++++++++++--------------
 dist/dataGrid.min.js |  2 +-
 2 files changed, 26 insertions(+), 15 deletions(-)

diff --git a/dist/dataGrid.js b/dist/dataGrid.js
index 5ce3549..8688c79 100644
--- a/dist/dataGrid.js
+++ b/dist/dataGrid.js
@@ -55,10 +55,12 @@
                 }
             });
 
-            $scope.sort = function (predicate) {
-                var direction = $scope.sortOptions.predicate === predicate && $scope.sortOptions.direction === 'desc' ? 'asc' : 'desc';
-                $scope.sortOptions.predicate = predicate;
-                $scope.sortOptions.direction = direction;
+            $scope.sort = function (predicate, isDefaultSort) {
+                if (!isDefaultSort) {
+                    var direction = $scope.sortOptions.predicate === predicate && $scope.sortOptions.direction === 'desc' ? 'asc' : 'desc';
+                    $scope.sortOptions.direction = direction;
+                    $scope.sortOptions.predicate = predicate;
+                }
                 $scope.paginationOptions.currentPage = 1;
                 $scope.reloadGrid();
             };
@@ -107,7 +109,7 @@
                 //custom filters
                 $scope.filters.forEach(function (filter) {
                     var urlName = filter.model,
-                        value = $scope.$eval(urlName);
+                        value = filter.isInScope ? $scope.$eval(urlName) : $scope.$parent.$eval(urlName);
 
                     if (filter.disableUrl) {
                         needApplyFilters = true;
@@ -173,8 +175,13 @@
                     }
 
                     if (value) {
-                        $scope.__evaltmp = value;
-                        $scope.$eval(urlName + '=__evaltmp');
+                        if (filter.isInScope) {
+                            $scope.__evaltmp = value;
+                            $scope.$eval(urlName + '=__evaltmp');
+                        } else {
+                            $scope.$parent.__evaltmp = value;
+                            $scope.$parent.$eval(urlName + '=__evaltmp');
+                        }
                     }
                 });
 
@@ -212,10 +219,14 @@
 
             function getData() {
                 var url = $location.path().slice(1);
-                $scope._gridOptions.getData('?' + url, function (data, totalItems) {
-                    $scope.filtered = data;
-                    $scope.paginationOptions.totalItems = totalItems;
-                });
+                if (!url && $scope.sortOptions.predicate) {
+                    $scope.sort($scope.sortOptions.predicate, true);
+                } else {
+                    $scope._gridOptions.getData('?' + url, function (data, totalItems) {
+                        $scope.filtered = data;
+                        $scope.paginationOptions.totalItems = totalItems;
+                    });
+                }
                 // -> to promise
                 //$scope._gridOptions.getData('?' + url).then(function (data, totalItems) {
                 //    $scope.filtered = data;
@@ -260,7 +271,7 @@
                 $scope.filters.forEach(function (filter) {
                     var predicate = filter.filterBy,
                         urlName = filter.model,
-                        value = $scope.$eval(urlName),
+                        value = filter.isInScope ? $scope.$eval(urlName) : $scope.$parent.$eval(urlName),
                         type = filter.filterType;
                     if ($scope.customFilters[urlName]) {
                         $scope.filtered = $scope.customFilters[urlName]($scope.filtered, value, predicate);
@@ -302,7 +313,7 @@
 
                     angular.forEach(angular.element(document.querySelectorAll('[filter-by]')), function (filter) {
                         var element = angular.element(filter),
-                            isInScope = directiveElement.find(element).length > 0,
+                            isInScope = $element.find(element).length > 0,
                             predicate = element.attr('filter-by'),
                             filterType = element.attr('filter-type') || '',
                             urlName = element.attr('ng-model'),
@@ -329,7 +340,7 @@
                             element.attr('ng-change', 'filter()');
                             //$compile(element)($scope);
                         }
-                        $compile(element)($scope);
+                        //$compile(element)($scope);
                         filters.push({
                             model: urlName,
                             isInScope: isInScope,
diff --git a/dist/dataGrid.min.js b/dist/dataGrid.min.js
index e9c6a48..7790baf 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(){var t,i=!1;t="page="+e.paginationOptions.currentPage,e.paginationOptions.itemsPerPage!==e.defaultsPaginationOptions.itemsPerPage&&(t+="&itemsPerPage="+e.paginationOptions.itemsPerPage),e.sortOptions.predicate&&(t+="&sort="+encodeURIComponent(e.sortOptions.predicate+"-"+e.sortOptions.direction)),e.filters.forEach(function(r){var n=r.model,a=e.$eval(n);if(r.disableUrl)return void(i=!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}t+="&"+encodeURIComponent(n)+"="+encodeURIComponent(a)}}),i&&c(),n.path(t)}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&&(e.__evaltmp=n,e.$eval(i+"=__evaltmp"))}}),e.serverPagination||p(),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);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=e.$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){var i=e.sortOptions.predicate===t&&"desc"===e.sortOptions.direction?"asc":"desc";e.sortOptions.predicate=t,e.sortOptions.direction=i,e.paginationOptions.currentPage=1,e.reloadGrid()},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(){e.urlSync||e.serverPagination?o():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=l.find(n).length>0,s=n.attr("filter-by"),p=n.attr("filter-type")||"",g=n.attr("ng-model"),d=n.attr("disable-url");c&&n.attr("grid-id")&&c!=n.attr("grid-id")||("select"!==p||(i[g+"Options"]=t(i.$eval(r.attr("grid-options")+".data"),s)),!~p.indexOf("date")||n.attr("ng-focus")||n.attr("ng-blur")||(n.attr("ng-focus","filter('{"+g+" : this."+g+"}')"),n.attr("ng-blur","filter('{"+g+" : this."+g+"}')")),g||(g=s,n.attr("ng-model",s),n.attr("ng-change","filter()")),o.push({model:g,isInScope:a,filterBy:s,filterType:p,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(){var t,i=!1;t="page="+e.paginationOptions.currentPage,e.paginationOptions.itemsPerPage!==e.defaultsPaginationOptions.itemsPerPage&&(t+="&itemsPerPage="+e.paginationOptions.itemsPerPage),e.sortOptions.predicate&&(t+="&sort="+encodeURIComponent(e.sortOptions.predicate+"-"+e.sortOptions.direction)),e.filters.forEach(function(r){var n=r.model,a=r.isInScope?e.$eval(n):e.$parent.$eval(n);if(r.disableUrl)return void(i=!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}t+="&"+encodeURIComponent(n)+"="+encodeURIComponent(a)}}),i&&c(),n.path(t)}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.serverPagination||p(),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()},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(){e.urlSync||e.serverPagination?o():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

From 7f07d07c7aabc1ad184b13df8a177ba049b46906 Mon Sep 17 00:00:00 2001
From: skozlov <sergey.kozlovich@landsend.com>
Date: Tue, 14 Jun 2016 12:08:02 +0300
Subject: [PATCH 13/53] Was added documentation for server pagination.

---
 README.md                             | 10 +++++++---
 demo/bootstrap/index.html             |  5 ++++-
 demo/bootstrap/server-pagination.html | 18 ++++++++++++++++--
 dist/dataGrid.js                      |  5 -----
 dist/dataGrid.min.js                  |  2 +-
 src/js/dataGrid.js                    |  5 -----
 6 files changed, 28 insertions(+), 17 deletions(-)

diff --git a/README.md b/README.md
index 8baf5fe..30c62b2 100644
--- a/README.md
+++ b/README.md
@@ -26,9 +26,10 @@ Direct download: get ZIP archive [from here](https://github.com/angular-data-gri
 Then use files from *dist* folder (see below).
 
 ### Setup
-1. Include scripts in you application: `dataGrid.min.js` and `pagination.min.js` (include the second one only if you need pagination). 
+1. Include scripts in you application: `angular.min.js`, `dataGrid.min.js` and `pagination.min.js` (include the second one only if you need pagination).
  
  ```javascript
+ <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
  <script src="bower_components/angular-data-grid/dist/pagination.min.js"></script>
  <script src="bower_components/angular-data-grid/dist/dataGrid.min.js"></script>
  ```
@@ -105,7 +106,10 @@ Use this object for calling methods of directive: `sort()`, `filter()`, `refresh
                  };
  ```
  
- - For server side pagination/filtering to fetch data by page: assign ```getData``` method to some function with URL params as 1st parameter and data itself as 2d parameter:
+ - For server side pagination/filtering to fetch data by page:
+ 1. add attribute 'server-pagination'=true on element on which you applied directive 'grid-data'
+ 2. assign ```getData``` method to some function with URL params as 1st parameter and data itself as 2d parameter:
+
  
  ```javascript
     $scope.gridOptions = {
@@ -145,7 +149,7 @@ $scope.gridOptions = {
 
 ### Pagination
 
-You can optionally use `pagination` directive to display paging with previous/next and first/last controls. 
+You can optionally use `grid-pagination` directive to display paging with previous/next and first/last controls.
 Directive is built on a base of excellent [Angular UI](https://angular-ui.github.io/bootstrap/) component and shares extensive API: 
 
 ```HTML
diff --git a/demo/bootstrap/index.html b/demo/bootstrap/index.html
index 604e99b..90b9860 100644
--- a/demo/bootstrap/index.html
+++ b/demo/bootstrap/index.html
@@ -42,6 +42,9 @@ <h4>Additional Demos</h4>
         <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>
     </ul>
     <hr>
     <div class="row">
@@ -168,7 +171,7 @@ <h4>Additional Demos</h4>
                                     ng-model="status"
                                     ng-change="filter()">
                                 <option value="">All Statuses</option>
-                                <option ng-repeat="option in UI.statusOptions track by option.value"
+                                <option ng-repeat="option in statusOptions track by option.value"
                                         value="{{option.value}}">{{option.text}}
                                 </option>
                             </select>
diff --git a/demo/bootstrap/server-pagination.html b/demo/bootstrap/server-pagination.html
index 40f232c..f9b25a8 100644
--- a/demo/bootstrap/server-pagination.html
+++ b/demo/bootstrap/server-pagination.html
@@ -25,7 +25,21 @@
     <link rel="stylesheet" href="css/angular-data-grid.bootstrap.css">
 </head>
 <body ng-controller="myAppController">
+<nav class="navbar navbar-inverse">
+    <div class="container">
+        <a href="#" class="navbar-brand">Angular Data Grid - Server Pagination</a>
+        <ul class="nav navbar-nav navbar-right">
+            <li><a href="index.html">Back to main demo</a></li>
+        </ul>
+    </div>
+</nav>
 <div class="container">
+    <div class="margin-bottom-basic">
+        <h3>Angular Data Grid Server Pagination</h3>
+        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>
@@ -202,7 +216,7 @@
 <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="../../dist/pagination.js"></script>
-<script src="../../dist/dataGrid.js"></script>
+<script src="../../dist/pagination.min.js"></script>
+<script src="../../dist/dataGrid.min.js"></script>
 <script src="js/serverPaginationApp.js"></script>
 </html>
\ No newline at end of file
diff --git a/dist/dataGrid.js b/dist/dataGrid.js
index 8688c79..c85c4e4 100644
--- a/dist/dataGrid.js
+++ b/dist/dataGrid.js
@@ -185,11 +185,6 @@
                     }
                 });
 
-                if (!$scope.serverPagination) {
-                    applyCustomFilters();
-                }
-
-
                 //pagination options
                 $scope.paginationOptions.itemsPerPage = $scope.defaultsPaginationOptions.itemsPerPage;
                 $scope.paginationOptions.currentPage = $scope.defaultsPaginationOptions.currentPage;
diff --git a/dist/dataGrid.min.js b/dist/dataGrid.min.js
index 7790baf..31f08ff 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(){var t,i=!1;t="page="+e.paginationOptions.currentPage,e.paginationOptions.itemsPerPage!==e.defaultsPaginationOptions.itemsPerPage&&(t+="&itemsPerPage="+e.paginationOptions.itemsPerPage),e.sortOptions.predicate&&(t+="&sort="+encodeURIComponent(e.sortOptions.predicate+"-"+e.sortOptions.direction)),e.filters.forEach(function(r){var n=r.model,a=r.isInScope?e.$eval(n):e.$parent.$eval(n);if(r.disableUrl)return void(i=!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}t+="&"+encodeURIComponent(n)+"="+encodeURIComponent(a)}}),i&&c(),n.path(t)}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.serverPagination||p(),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()},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(){e.urlSync||e.serverPagination?o():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(){var t,i=!1;t="page="+e.paginationOptions.currentPage,e.paginationOptions.itemsPerPage!==e.defaultsPaginationOptions.itemsPerPage&&(t+="&itemsPerPage="+e.paginationOptions.itemsPerPage),e.sortOptions.predicate&&(t+="&sort="+encodeURIComponent(e.sortOptions.predicate+"-"+e.sortOptions.direction)),e.filters.forEach(function(r){var n=r.model,a=r.isInScope?e.$eval(n):e.$parent.$eval(n);if(r.disableUrl)return void(i=!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}t+="&"+encodeURIComponent(n)+"="+encodeURIComponent(a)}}),i&&c(),n.path(t)}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()},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(){e.urlSync||e.serverPagination?o():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
diff --git a/src/js/dataGrid.js b/src/js/dataGrid.js
index 8688c79..c85c4e4 100644
--- a/src/js/dataGrid.js
+++ b/src/js/dataGrid.js
@@ -185,11 +185,6 @@
                     }
                 });
 
-                if (!$scope.serverPagination) {
-                    applyCustomFilters();
-                }
-
-
                 //pagination options
                 $scope.paginationOptions.itemsPerPage = $scope.defaultsPaginationOptions.itemsPerPage;
                 $scope.paginationOptions.currentPage = $scope.defaultsPaginationOptions.currentPage;

From 33a81fc2ab4e0233a34ec31eda1def04c3fbdf74 Mon Sep 17 00:00:00 2001
From: skozlov <sergey.kozlovich@landsend.com>
Date: Wed, 6 Jul 2016 16:03:45 +0300
Subject: [PATCH 14/53] Fixed inintial request for server pagination, clear
 dates for material and some other minor fixes1

---
 demo/bootstrap/css/loading-bar.min.css   |   1 +
 demo/bootstrap/js/serverPaginationApp.js |   2 +-
 demo/bootstrap/server-pagination.html    |   8 +-
 demo/material/css/loading-bar.min.css    |   1 +
 demo/material/index.html                 |   2 +-
 dist/dataGrid.js                         |  11 +-
 dist/dataGrid.min.js                     |   2 +-
 dist/loading-bar.js                      | 324 +++++++++++++++++++++++
 dist/loading-bar.min.js                  |   1 +
 src/js/dataGrid.js                       |  11 +-
 src/js/vendors/loading-bar.js            | 324 +++++++++++++++++++++++
 11 files changed, 673 insertions(+), 14 deletions(-)
 create mode 100644 demo/bootstrap/css/loading-bar.min.css
 create mode 100644 demo/material/css/loading-bar.min.css
 create mode 100644 dist/loading-bar.js
 create mode 100644 dist/loading-bar.min.js
 create mode 100644 src/js/vendors/loading-bar.js

diff --git a/demo/bootstrap/css/loading-bar.min.css b/demo/bootstrap/css/loading-bar.min.css
new file mode 100644
index 0000000..db06f19
--- /dev/null
+++ b/demo/bootstrap/css/loading-bar.min.css
@@ -0,0 +1 @@
+#loading-bar,#loading-bar-spinner{-webkit-transition:350ms linear all;-moz-transition:350ms linear all;-o-transition:350ms linear all;transition:350ms linear all}#loading-bar .ng-enter,#loading-bar .ng-leave.ng-leave-active,#loading-bar-spinner .ng-enter,#loading-bar-spinner .ng-leave.ng-leave-active{opacity:0}#loading-bar .ng-enter.ng-enter-active,#loading-bar .ng-leave,#loading-bar-spinner .ng-enter.ng-enter-active,#loading-bar-spinner .ng-leave{opacity:1}#loading-bar{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.25);z-index:11002}#loading-bar .bar{-webkit-transition:width 350ms;-moz-transition:width 350ms;-o-transition:width 350ms;transition:width 350ms;background:#29d;position:fixed;z-index:11002;top:0;left:0;width:100%;height:2px;border-bottom-right-radius:1px;border-top-right-radius:1px}#loading-bar .peg{position:absolute;width:70px;right:0;top:0;height:2px}#loading-bar-spinner{display:block;position:fixed;z-index:11002;top:50%;left:50%;margin-left:-15px;margin-right:-15px}#loading-bar-spinner .spinner-icon{width:34px;height:34px;border:solid 2px transparent;border-top-color:#fff;border-left-color:#fff;-webkit-border-radius:17px;-moz-border-radius:17px;border-radius:17px;-webkit-animation:loading-bar-spinner .8s linear infinite;-moz-animation:loading-bar-spinner .8s linear infinite;-ms-animation:loading-bar-spinner .8s linear infinite;-o-animation:loading-bar-spinner .8s linear infinite;animation:loading-bar-spinner .8s linear infinite}@-webkit-keyframes loading-bar-spinner{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@-moz-keyframes loading-bar-spinner{0%{-moz-transform:rotate(0);transform:rotate(0)}100%{-moz-transform:rotate(360deg);transform:rotate(360deg)}}@-o-keyframes loading-bar-spinner{0%{-o-transform:rotate(0);transform:rotate(0)}100%{-o-transform:rotate(360deg);transform:rotate(360deg)}}@-ms-keyframes loading-bar-spinner{0%{-ms-transform:rotate(0);transform:rotate(0)}100%{-ms-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes loading-bar-spinner{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}
\ No newline at end of file
diff --git a/demo/bootstrap/js/serverPaginationApp.js b/demo/bootstrap/js/serverPaginationApp.js
index dc46500..c175e45 100644
--- a/demo/bootstrap/js/serverPaginationApp.js
+++ b/demo/bootstrap/js/serverPaginationApp.js
@@ -2,7 +2,7 @@
     'use strict';
 
     angular
-        .module('myApp', ['ui.bootstrap', 'dataGrid', 'pagination'])
+        .module('myApp', ['ui.bootstrap', 'dataGrid', 'pagination', 'angular-loading-bar'])
         .controller('myAppController', MyAppController)
         .factory('myAppFactory', MyAppFactory);
 
diff --git a/demo/bootstrap/server-pagination.html b/demo/bootstrap/server-pagination.html
index f9b25a8..c3d5b73 100644
--- a/demo/bootstrap/server-pagination.html
+++ b/demo/bootstrap/server-pagination.html
@@ -23,6 +23,7 @@
     <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 ng-controller="myAppController">
 <nav class="navbar navbar-inverse">
@@ -151,8 +152,8 @@ <h3>Angular Data Grid 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"
@@ -165,7 +166,7 @@ <h3>Angular Data Grid Server Pagination</h3>
                         </option>
                     </select>
                 </th>
-                <th sortable="total" class="sortable">Total</th>
+                <th sortable="total" class="sortable">Total </th>
             </tr>
             </thead>
             <tbody>
@@ -218,5 +219,6 @@ <h3>Angular Data Grid Server Pagination</h3>
 
 <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/serverPaginationApp.js"></script>
 </html>
\ No newline at end of file
diff --git a/demo/material/css/loading-bar.min.css b/demo/material/css/loading-bar.min.css
new file mode 100644
index 0000000..db06f19
--- /dev/null
+++ b/demo/material/css/loading-bar.min.css
@@ -0,0 +1 @@
+#loading-bar,#loading-bar-spinner{-webkit-transition:350ms linear all;-moz-transition:350ms linear all;-o-transition:350ms linear all;transition:350ms linear all}#loading-bar .ng-enter,#loading-bar .ng-leave.ng-leave-active,#loading-bar-spinner .ng-enter,#loading-bar-spinner .ng-leave.ng-leave-active{opacity:0}#loading-bar .ng-enter.ng-enter-active,#loading-bar .ng-leave,#loading-bar-spinner .ng-enter.ng-enter-active,#loading-bar-spinner .ng-leave{opacity:1}#loading-bar{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.25);z-index:11002}#loading-bar .bar{-webkit-transition:width 350ms;-moz-transition:width 350ms;-o-transition:width 350ms;transition:width 350ms;background:#29d;position:fixed;z-index:11002;top:0;left:0;width:100%;height:2px;border-bottom-right-radius:1px;border-top-right-radius:1px}#loading-bar .peg{position:absolute;width:70px;right:0;top:0;height:2px}#loading-bar-spinner{display:block;position:fixed;z-index:11002;top:50%;left:50%;margin-left:-15px;margin-right:-15px}#loading-bar-spinner .spinner-icon{width:34px;height:34px;border:solid 2px transparent;border-top-color:#fff;border-left-color:#fff;-webkit-border-radius:17px;-moz-border-radius:17px;border-radius:17px;-webkit-animation:loading-bar-spinner .8s linear infinite;-moz-animation:loading-bar-spinner .8s linear infinite;-ms-animation:loading-bar-spinner .8s linear infinite;-o-animation:loading-bar-spinner .8s linear infinite;animation:loading-bar-spinner .8s linear infinite}@-webkit-keyframes loading-bar-spinner{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@-moz-keyframes loading-bar-spinner{0%{-moz-transform:rotate(0);transform:rotate(0)}100%{-moz-transform:rotate(360deg);transform:rotate(360deg)}}@-o-keyframes loading-bar-spinner{0%{-o-transform:rotate(0);transform:rotate(0)}100%{-o-transform:rotate(360deg);transform:rotate(360deg)}}@-ms-keyframes loading-bar-spinner{0%{-ms-transform:rotate(0);transform:rotate(0)}100%{-ms-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes loading-bar-spinner{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}
\ No newline at end of file
diff --git a/demo/material/index.html b/demo/material/index.html
index cf9ec30..da5b4a1 100644
--- a/demo/material/index.html
+++ b/demo/material/index.html
@@ -79,7 +79,7 @@ <h4>Angular Data Grid sample using Material Design styling</h4>
                                    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 = ''; reloadGrid();">Clear Dates</md-button>
+                    <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">
diff --git a/dist/dataGrid.js b/dist/dataGrid.js
index c85c4e4..8917d18 100644
--- a/dist/dataGrid.js
+++ b/dist/dataGrid.js
@@ -62,7 +62,7 @@
                     $scope.sortOptions.predicate = predicate;
                 }
                 $scope.paginationOptions.currentPage = 1;
-                $scope.reloadGrid();
+                $scope.reloadGrid(isDefaultSort);
             };
 
             $scope.filter = function () {
@@ -82,9 +82,9 @@
                 }
             });
 
-            $scope.reloadGrid = function () {
+            $scope.reloadGrid = function (isDefaultSort) {
                 if ($scope.urlSync || $scope.serverPagination) {
-                    changePath();
+                    changePath(isDefaultSort);
                 } else {
                     applyFilters();
                 }
@@ -94,7 +94,7 @@
             $scope._gridActions.filter = $scope.filter;
             $scope._gridActions.sort = $scope.sort;
 
-            function changePath() {
+            function changePath(isDefaultSort) {
                 var path, needApplyFilters = false;
 
                 path = 'page=' + $scope.paginationOptions.currentPage;
@@ -135,6 +135,9 @@
                     applyFilters();
                 }
                 $location.path(path);
+                if (isDefaultSort) {
+                    $scope.$apply();
+                }
             }
 
             function parseUrl() {
diff --git a/dist/dataGrid.min.js b/dist/dataGrid.min.js
index 31f08ff..82ad512 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(){var t,i=!1;t="page="+e.paginationOptions.currentPage,e.paginationOptions.itemsPerPage!==e.defaultsPaginationOptions.itemsPerPage&&(t+="&itemsPerPage="+e.paginationOptions.itemsPerPage),e.sortOptions.predicate&&(t+="&sort="+encodeURIComponent(e.sortOptions.predicate+"-"+e.sortOptions.direction)),e.filters.forEach(function(r){var n=r.model,a=r.isInScope?e.$eval(n):e.$parent.$eval(n);if(r.disableUrl)return void(i=!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}t+="&"+encodeURIComponent(n)+"="+encodeURIComponent(a)}}),i&&c(),n.path(t)}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()},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(){e.urlSync||e.serverPagination?o():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("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
diff --git a/dist/loading-bar.js b/dist/loading-bar.js
new file mode 100644
index 0000000..d12341f
--- /dev/null
+++ b/dist/loading-bar.js
@@ -0,0 +1,324 @@
+/*!
+ * angular-loading-bar v0.7.1
+ * https://chieffancypants.github.io/angular-loading-bar
+ * Copyright (c) 2015 Wes Cruver
+ * License: MIT
+ */
+/*
+ * angular-loading-bar
+ *
+ * intercepts XHR requests and creates a loading bar.
+ * Based on the excellent nprogress work by rstacruz (more info in readme)
+ *
+ * (c) 2013 Wes Cruver
+ * License: MIT
+ */
+
+
+(function() {
+
+    'use strict';
+
+// Alias the loading bar for various backwards compatibilities since the project has matured:
+    angular.module('angular-loading-bar', ['cfp.loadingBarInterceptor']);
+    angular.module('chieffancypants.loadingBar', ['cfp.loadingBarInterceptor']);
+
+
+    /**
+     * loadingBarInterceptor service
+     *
+     * Registers itself as an Angular interceptor and listens for XHR requests.
+     */
+    angular.module('cfp.loadingBarInterceptor', ['cfp.loadingBar'])
+        .config(['$httpProvider', function ($httpProvider) {
+
+            var interceptor = ['$q', '$cacheFactory', '$timeout', '$rootScope', '$log', 'cfpLoadingBar', function ($q, $cacheFactory, $timeout, $rootScope, $log, cfpLoadingBar) {
+
+                /**
+                 * The total number of requests made
+                 */
+                var reqsTotal = 0;
+
+                /**
+                 * The number of requests completed (either successfully or not)
+                 */
+                var reqsCompleted = 0;
+
+                /**
+                 * The amount of time spent fetching before showing the loading bar
+                 */
+                var latencyThreshold = cfpLoadingBar.latencyThreshold;
+
+                /**
+                 * $timeout handle for latencyThreshold
+                 */
+                var startTimeout;
+
+
+                /**
+                 * calls cfpLoadingBar.complete() which removes the
+                 * loading bar from the DOM.
+                 */
+                function setComplete() {
+                    $timeout.cancel(startTimeout);
+                    cfpLoadingBar.complete();
+                    reqsCompleted = 0;
+                    reqsTotal = 0;
+                }
+
+                /**
+                 * Determine if the response has already been cached
+                 * @param  {Object}  config the config option from the request
+                 * @return {Boolean} retrns true if cached, otherwise false
+                 */
+                function isCached(config) {
+                    var cache;
+                    var defaultCache = $cacheFactory.get('$http');
+                    var defaults = $httpProvider.defaults;
+
+                    // Choose the proper cache source. Borrowed from angular: $http service
+                    if ((config.cache || defaults.cache) && config.cache !== false &&
+                        (config.method === 'GET' || config.method === 'JSONP')) {
+                        cache = angular.isObject(config.cache) ? config.cache
+                            : angular.isObject(defaults.cache) ? defaults.cache
+                            : defaultCache;
+                    }
+
+                    var cached = cache !== undefined ?
+                    cache.get(config.url) !== undefined : false;
+
+                    if (config.cached !== undefined && cached !== config.cached) {
+                        return config.cached;
+                    }
+                    config.cached = cached;
+                    return cached;
+                }
+
+
+                return {
+                    'request': function(config) {
+                        // Check to make sure this request hasn't already been cached and that
+                        // the requester didn't explicitly ask us to ignore this request:
+                        if (!config.ignoreLoadingBar && !isCached(config)) {
+                            $rootScope.$broadcast('cfpLoadingBar:loading', {url: config.url});
+                            if (reqsTotal === 0) {
+                                startTimeout = $timeout(function() {
+                                    cfpLoadingBar.start();
+                                }, latencyThreshold);
+                            }
+                            reqsTotal++;
+                            cfpLoadingBar.set(reqsCompleted / reqsTotal);
+                        }
+                        return config;
+                    },
+
+                    'response': function(response) {
+                        if (!response || !response.config) {
+                            $log.error('Broken interceptor detected: Config object not supplied in response:\n https://github.com/chieffancypants/angular-loading-bar/pull/50');
+                            return response;
+                        }
+
+                        if (!response.config.ignoreLoadingBar && !isCached(response.config)) {
+                            reqsCompleted++;
+                            $rootScope.$broadcast('cfpLoadingBar:loaded', {url: response.config.url, result: response});
+                            if (reqsCompleted >= reqsTotal) {
+                                setComplete();
+                            } else {
+                                cfpLoadingBar.set(reqsCompleted / reqsTotal);
+                            }
+                        }
+                        return response;
+                    },
+
+                    'responseError': function(rejection) {
+                        if (!rejection || !rejection.config) {
+                            $log.error('Broken interceptor detected: Config object not supplied in rejection:\n https://github.com/chieffancypants/angular-loading-bar/pull/50');
+                            return $q.reject(rejection);
+                        }
+
+                        if (!rejection.config.ignoreLoadingBar && !isCached(rejection.config)) {
+                            reqsCompleted++;
+                            $rootScope.$broadcast('cfpLoadingBar:loaded', {url: rejection.config.url, result: rejection});
+                            if (reqsCompleted >= reqsTotal) {
+                                setComplete();
+                            } else {
+                                cfpLoadingBar.set(reqsCompleted / reqsTotal);
+                            }
+                        }
+                        return $q.reject(rejection);
+                    }
+                };
+            }];
+
+            $httpProvider.interceptors.push(interceptor);
+        }]);
+
+
+    /**
+     * Loading Bar
+     *
+     * This service handles adding and removing the actual element in the DOM.
+     * Generally, best practices for DOM manipulation is to take place in a
+     * directive, but because the element itself is injected in the DOM only upon
+     * XHR requests, and it's likely needed on every view, the best option is to
+     * use a service.
+     */
+    angular.module('cfp.loadingBar', [])
+        .provider('cfpLoadingBar', function() {
+
+            this.includeSpinner = true;
+            this.includeBar = true;
+            this.latencyThreshold = 100;
+            this.startSize = 0.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 ($injector, $document, $timeout, $rootScope) {
+                var $animate;
+                var $parentSelector = this.parentSelector,
+                    loadingBarContainer = angular.element(this.loadingBarTemplate),
+                    loadingBar = loadingBarContainer.find('div').eq(0),
+                    spinner = angular.element(this.spinnerTemplate);
+
+                var incTimeout,
+                    completeTimeout,
+                    started = false,
+                    status = 0;
+
+                var includeSpinner = this.includeSpinner;
+                var includeBar = this.includeBar;
+                var startSize = this.startSize;
+
+                /**
+                 * Inserts the loading bar element into the dom, and sets it to 2%
+                 */
+                function _start() {
+                    if (!$animate) {
+                        $animate = $injector.get('$animate');
+                    }
+
+                    var $parent = $document.find($parentSelector).eq(0);
+                    $timeout.cancel(completeTimeout);
+
+                    // do not continually broadcast the started event:
+                    if (started) {
+                        return;
+                    }
+
+                    $rootScope.$broadcast('cfpLoadingBar:started');
+                    started = true;
+
+                    if (includeBar) {
+                        $animate.enter(loadingBarContainer, $parent, angular.element($parent[0].lastChild));
+                    }
+
+                    if (includeSpinner) {
+                        $animate.enter(spinner, $parent, angular.element($parent[0].lastChild));
+                    }
+
+                    _set(startSize);
+                }
+
+                /**
+                 * Set the loading bar's width to a certain percent.
+                 *
+                 * @param n any value between 0 and 1
+                 */
+                function _set(n) {
+                    if (!started) {
+                        return;
+                    }
+                    var pct = (n * 100) + '%';
+                    loadingBar.css('width', pct);
+                    status = n;
+
+                    // increment loadingbar to give the illusion that there is always
+                    // progress but make sure to cancel the previous timeouts so we don't
+                    // have multiple incs running at the same time.
+                    $timeout.cancel(incTimeout);
+                    incTimeout = $timeout(function() {
+                        _inc();
+                    }, 250);
+                }
+
+                /**
+                 * Increments the loading bar by a random amount
+                 * but slows down as it progresses
+                 */
+                function _inc() {
+                    if (_status() >= 1) {
+                        return;
+                    }
+
+                    var rnd = 0;
+
+                    // TODO: do this mathmatically instead of through conditions
+
+                    var stat = _status();
+                    if (stat >= 0 && stat < 0.25) {
+                        // Start out between 3 - 6% increments
+                        rnd = (Math.random() * (5 - 3 + 1) + 3) / 100;
+                    } else if (stat >= 0.25 && stat < 0.65) {
+                        // increment between 0 - 3%
+                        rnd = (Math.random() * 3) / 100;
+                    } else if (stat >= 0.65 && stat < 0.9) {
+                        // increment between 0 - 2%
+                        rnd = (Math.random() * 2) / 100;
+                    } else if (stat >= 0.9 && stat < 0.99) {
+                        // finally, increment it .5 %
+                        rnd = 0.005;
+                    } else {
+                        // after 99%, don't increment:
+                        rnd = 0;
+                    }
+
+                    var pct = _status() + rnd;
+                    _set(pct);
+                }
+
+                function _status() {
+                    return status;
+                }
+
+                function _completeAnimation() {
+                    status = 0;
+                    started = false;
+                }
+
+                function _complete() {
+                    if (!$animate) {
+                        $animate = $injector.get('$animate');
+                    }
+
+                    $rootScope.$broadcast('cfpLoadingBar:completed');
+                    _set(1);
+
+                    $timeout.cancel(completeTimeout);
+
+                    // Attempt to aggregate any start/complete calls within 500ms:
+                    completeTimeout = $timeout(function() {
+                        var promise = $animate.leave(loadingBarContainer, _completeAnimation);
+                        if (promise && promise.then) {
+                            promise.then(_completeAnimation);
+                        }
+                        $animate.leave(spinner);
+                    }, 500);
+                }
+
+                return {
+                    start            : _start,
+                    set              : _set,
+                    status           : _status,
+                    inc              : _inc,
+                    complete         : _complete,
+                    includeSpinner   : this.includeSpinner,
+                    latencyThreshold : this.latencyThreshold,
+                    parentSelector   : this.parentSelector,
+                    startSize        : this.startSize
+                };
+
+
+            }];     //
+        });       // wtf javascript. srsly
+})();       //
\ No newline at end of file
diff --git a/dist/loading-bar.min.js b/dist/loading-bar.min.js
new file mode 100644
index 0000000..f0fdc27
--- /dev/null
+++ b/dist/loading-bar.min.js
@@ -0,0 +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
diff --git a/src/js/dataGrid.js b/src/js/dataGrid.js
index c85c4e4..8917d18 100644
--- a/src/js/dataGrid.js
+++ b/src/js/dataGrid.js
@@ -62,7 +62,7 @@
                     $scope.sortOptions.predicate = predicate;
                 }
                 $scope.paginationOptions.currentPage = 1;
-                $scope.reloadGrid();
+                $scope.reloadGrid(isDefaultSort);
             };
 
             $scope.filter = function () {
@@ -82,9 +82,9 @@
                 }
             });
 
-            $scope.reloadGrid = function () {
+            $scope.reloadGrid = function (isDefaultSort) {
                 if ($scope.urlSync || $scope.serverPagination) {
-                    changePath();
+                    changePath(isDefaultSort);
                 } else {
                     applyFilters();
                 }
@@ -94,7 +94,7 @@
             $scope._gridActions.filter = $scope.filter;
             $scope._gridActions.sort = $scope.sort;
 
-            function changePath() {
+            function changePath(isDefaultSort) {
                 var path, needApplyFilters = false;
 
                 path = 'page=' + $scope.paginationOptions.currentPage;
@@ -135,6 +135,9 @@
                     applyFilters();
                 }
                 $location.path(path);
+                if (isDefaultSort) {
+                    $scope.$apply();
+                }
             }
 
             function parseUrl() {
diff --git a/src/js/vendors/loading-bar.js b/src/js/vendors/loading-bar.js
new file mode 100644
index 0000000..d12341f
--- /dev/null
+++ b/src/js/vendors/loading-bar.js
@@ -0,0 +1,324 @@
+/*!
+ * angular-loading-bar v0.7.1
+ * https://chieffancypants.github.io/angular-loading-bar
+ * Copyright (c) 2015 Wes Cruver
+ * License: MIT
+ */
+/*
+ * angular-loading-bar
+ *
+ * intercepts XHR requests and creates a loading bar.
+ * Based on the excellent nprogress work by rstacruz (more info in readme)
+ *
+ * (c) 2013 Wes Cruver
+ * License: MIT
+ */
+
+
+(function() {
+
+    'use strict';
+
+// Alias the loading bar for various backwards compatibilities since the project has matured:
+    angular.module('angular-loading-bar', ['cfp.loadingBarInterceptor']);
+    angular.module('chieffancypants.loadingBar', ['cfp.loadingBarInterceptor']);
+
+
+    /**
+     * loadingBarInterceptor service
+     *
+     * Registers itself as an Angular interceptor and listens for XHR requests.
+     */
+    angular.module('cfp.loadingBarInterceptor', ['cfp.loadingBar'])
+        .config(['$httpProvider', function ($httpProvider) {
+
+            var interceptor = ['$q', '$cacheFactory', '$timeout', '$rootScope', '$log', 'cfpLoadingBar', function ($q, $cacheFactory, $timeout, $rootScope, $log, cfpLoadingBar) {
+
+                /**
+                 * The total number of requests made
+                 */
+                var reqsTotal = 0;
+
+                /**
+                 * The number of requests completed (either successfully or not)
+                 */
+                var reqsCompleted = 0;
+
+                /**
+                 * The amount of time spent fetching before showing the loading bar
+                 */
+                var latencyThreshold = cfpLoadingBar.latencyThreshold;
+
+                /**
+                 * $timeout handle for latencyThreshold
+                 */
+                var startTimeout;
+
+
+                /**
+                 * calls cfpLoadingBar.complete() which removes the
+                 * loading bar from the DOM.
+                 */
+                function setComplete() {
+                    $timeout.cancel(startTimeout);
+                    cfpLoadingBar.complete();
+                    reqsCompleted = 0;
+                    reqsTotal = 0;
+                }
+
+                /**
+                 * Determine if the response has already been cached
+                 * @param  {Object}  config the config option from the request
+                 * @return {Boolean} retrns true if cached, otherwise false
+                 */
+                function isCached(config) {
+                    var cache;
+                    var defaultCache = $cacheFactory.get('$http');
+                    var defaults = $httpProvider.defaults;
+
+                    // Choose the proper cache source. Borrowed from angular: $http service
+                    if ((config.cache || defaults.cache) && config.cache !== false &&
+                        (config.method === 'GET' || config.method === 'JSONP')) {
+                        cache = angular.isObject(config.cache) ? config.cache
+                            : angular.isObject(defaults.cache) ? defaults.cache
+                            : defaultCache;
+                    }
+
+                    var cached = cache !== undefined ?
+                    cache.get(config.url) !== undefined : false;
+
+                    if (config.cached !== undefined && cached !== config.cached) {
+                        return config.cached;
+                    }
+                    config.cached = cached;
+                    return cached;
+                }
+
+
+                return {
+                    'request': function(config) {
+                        // Check to make sure this request hasn't already been cached and that
+                        // the requester didn't explicitly ask us to ignore this request:
+                        if (!config.ignoreLoadingBar && !isCached(config)) {
+                            $rootScope.$broadcast('cfpLoadingBar:loading', {url: config.url});
+                            if (reqsTotal === 0) {
+                                startTimeout = $timeout(function() {
+                                    cfpLoadingBar.start();
+                                }, latencyThreshold);
+                            }
+                            reqsTotal++;
+                            cfpLoadingBar.set(reqsCompleted / reqsTotal);
+                        }
+                        return config;
+                    },
+
+                    'response': function(response) {
+                        if (!response || !response.config) {
+                            $log.error('Broken interceptor detected: Config object not supplied in response:\n https://github.com/chieffancypants/angular-loading-bar/pull/50');
+                            return response;
+                        }
+
+                        if (!response.config.ignoreLoadingBar && !isCached(response.config)) {
+                            reqsCompleted++;
+                            $rootScope.$broadcast('cfpLoadingBar:loaded', {url: response.config.url, result: response});
+                            if (reqsCompleted >= reqsTotal) {
+                                setComplete();
+                            } else {
+                                cfpLoadingBar.set(reqsCompleted / reqsTotal);
+                            }
+                        }
+                        return response;
+                    },
+
+                    'responseError': function(rejection) {
+                        if (!rejection || !rejection.config) {
+                            $log.error('Broken interceptor detected: Config object not supplied in rejection:\n https://github.com/chieffancypants/angular-loading-bar/pull/50');
+                            return $q.reject(rejection);
+                        }
+
+                        if (!rejection.config.ignoreLoadingBar && !isCached(rejection.config)) {
+                            reqsCompleted++;
+                            $rootScope.$broadcast('cfpLoadingBar:loaded', {url: rejection.config.url, result: rejection});
+                            if (reqsCompleted >= reqsTotal) {
+                                setComplete();
+                            } else {
+                                cfpLoadingBar.set(reqsCompleted / reqsTotal);
+                            }
+                        }
+                        return $q.reject(rejection);
+                    }
+                };
+            }];
+
+            $httpProvider.interceptors.push(interceptor);
+        }]);
+
+
+    /**
+     * Loading Bar
+     *
+     * This service handles adding and removing the actual element in the DOM.
+     * Generally, best practices for DOM manipulation is to take place in a
+     * directive, but because the element itself is injected in the DOM only upon
+     * XHR requests, and it's likely needed on every view, the best option is to
+     * use a service.
+     */
+    angular.module('cfp.loadingBar', [])
+        .provider('cfpLoadingBar', function() {
+
+            this.includeSpinner = true;
+            this.includeBar = true;
+            this.latencyThreshold = 100;
+            this.startSize = 0.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 ($injector, $document, $timeout, $rootScope) {
+                var $animate;
+                var $parentSelector = this.parentSelector,
+                    loadingBarContainer = angular.element(this.loadingBarTemplate),
+                    loadingBar = loadingBarContainer.find('div').eq(0),
+                    spinner = angular.element(this.spinnerTemplate);
+
+                var incTimeout,
+                    completeTimeout,
+                    started = false,
+                    status = 0;
+
+                var includeSpinner = this.includeSpinner;
+                var includeBar = this.includeBar;
+                var startSize = this.startSize;
+
+                /**
+                 * Inserts the loading bar element into the dom, and sets it to 2%
+                 */
+                function _start() {
+                    if (!$animate) {
+                        $animate = $injector.get('$animate');
+                    }
+
+                    var $parent = $document.find($parentSelector).eq(0);
+                    $timeout.cancel(completeTimeout);
+
+                    // do not continually broadcast the started event:
+                    if (started) {
+                        return;
+                    }
+
+                    $rootScope.$broadcast('cfpLoadingBar:started');
+                    started = true;
+
+                    if (includeBar) {
+                        $animate.enter(loadingBarContainer, $parent, angular.element($parent[0].lastChild));
+                    }
+
+                    if (includeSpinner) {
+                        $animate.enter(spinner, $parent, angular.element($parent[0].lastChild));
+                    }
+
+                    _set(startSize);
+                }
+
+                /**
+                 * Set the loading bar's width to a certain percent.
+                 *
+                 * @param n any value between 0 and 1
+                 */
+                function _set(n) {
+                    if (!started) {
+                        return;
+                    }
+                    var pct = (n * 100) + '%';
+                    loadingBar.css('width', pct);
+                    status = n;
+
+                    // increment loadingbar to give the illusion that there is always
+                    // progress but make sure to cancel the previous timeouts so we don't
+                    // have multiple incs running at the same time.
+                    $timeout.cancel(incTimeout);
+                    incTimeout = $timeout(function() {
+                        _inc();
+                    }, 250);
+                }
+
+                /**
+                 * Increments the loading bar by a random amount
+                 * but slows down as it progresses
+                 */
+                function _inc() {
+                    if (_status() >= 1) {
+                        return;
+                    }
+
+                    var rnd = 0;
+
+                    // TODO: do this mathmatically instead of through conditions
+
+                    var stat = _status();
+                    if (stat >= 0 && stat < 0.25) {
+                        // Start out between 3 - 6% increments
+                        rnd = (Math.random() * (5 - 3 + 1) + 3) / 100;
+                    } else if (stat >= 0.25 && stat < 0.65) {
+                        // increment between 0 - 3%
+                        rnd = (Math.random() * 3) / 100;
+                    } else if (stat >= 0.65 && stat < 0.9) {
+                        // increment between 0 - 2%
+                        rnd = (Math.random() * 2) / 100;
+                    } else if (stat >= 0.9 && stat < 0.99) {
+                        // finally, increment it .5 %
+                        rnd = 0.005;
+                    } else {
+                        // after 99%, don't increment:
+                        rnd = 0;
+                    }
+
+                    var pct = _status() + rnd;
+                    _set(pct);
+                }
+
+                function _status() {
+                    return status;
+                }
+
+                function _completeAnimation() {
+                    status = 0;
+                    started = false;
+                }
+
+                function _complete() {
+                    if (!$animate) {
+                        $animate = $injector.get('$animate');
+                    }
+
+                    $rootScope.$broadcast('cfpLoadingBar:completed');
+                    _set(1);
+
+                    $timeout.cancel(completeTimeout);
+
+                    // Attempt to aggregate any start/complete calls within 500ms:
+                    completeTimeout = $timeout(function() {
+                        var promise = $animate.leave(loadingBarContainer, _completeAnimation);
+                        if (promise && promise.then) {
+                            promise.then(_completeAnimation);
+                        }
+                        $animate.leave(spinner);
+                    }, 500);
+                }
+
+                return {
+                    start            : _start,
+                    set              : _set,
+                    status           : _status,
+                    inc              : _inc,
+                    complete         : _complete,
+                    includeSpinner   : this.includeSpinner,
+                    latencyThreshold : this.latencyThreshold,
+                    parentSelector   : this.parentSelector,
+                    startSize        : this.startSize
+                };
+
+
+            }];     //
+        });       // wtf javascript. srsly
+})();       //
\ No newline at end of file

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 15/53] 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 16/53] 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 17/53] 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 18/53] 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 19/53] 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 20/53] 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 21/53] 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 22/53] 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 23/53] 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 24/53] 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 25/53] 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 26/53] 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 27/53] 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 28/53] 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 29/53] 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 30/53] 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 31/53] 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 32/53] 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 33/53] 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 34/53] 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 35/53] 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 36/53] 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 37/53] 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 38/53] #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 39/53] 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 40/53] 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 41/53] 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 42/53] 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 43/53] 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 44/53] 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 45/53] 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 46/53] 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 47/53] 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 48/53] 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 49/53] 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 50/53] 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 51/53] #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 52/53] #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 53/53] 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({