Refactors controllers and factories to return a variable. Enables angular pagination.

2016-11-18 13:51:00 -06:00
parent 4ab0ccaa1a
commit 2e43c5ff12
29 changed files with 841 additions and 383 deletions
--- a/app/init.py
+++ b/app/init.py
@@ -139,7 +139,7 @@ def get_cardsbydate(datepar, page):
    # Mon, 14 Nov 2016 19:46:09 GMT
    return jsonify({
        'cards':[{'_id': i[0], 'stroke_number': i[1], 'stroke_type': i[2], 'created_on': i[3]} for i in res.items],
-        'num_pages':res.pages, 'per_page': res.per_page})
+        'num_pages':res.pages, 'per_page': res.per_page, 'total':res.total})


@app.route('/api/tagsattime/<string:datetime>')
--- a/app/static/index.html
+++ b/app/static/index.html
@@ -66,6 +66,7 @@
 		<script src="js/lib/justgage.js"></script>
 		<script src="js/lib/ng-justgage.js"></script>
 		<script src="js/lib/LineChart.min.js"></script>
+        <script src="js/lib/dirPagination.js"></script>


 		<!-- application -->
--- a/app/static/js/cards.controller.js
+++ b/app/static/js/cards.controller.js
@@ -5,8 +5,6 @@ poconsole.controller('cardListCtrl', function($scope, $routeParams, Card, Page)
    getDateList.then(function(dates) {
        console.log(dates);
        $scope.dates = dates;
-        //TODO: ADD CURRENT DATE DETECTION
-        // $scope.currentDate = $scope.dates[0];

        var date_param;
        if (!$routeParams.date_param){
@@ -14,8 +12,6 @@ poconsole.controller('cardListCtrl', function($scope, $routeParams, Card, Page)
        } else {
            date_param = $routeParams.date_param;
        }
-        console.log({date_param: date_param});
-

        var page;
        if (!$routeParams.page){
@@ -23,7 +19,6 @@ poconsole.controller('cardListCtrl', function($scope, $routeParams, Card, Page)
        } else {
            page = $routeParams.page;
        }
-        console.log({page:page});

        $scope.getDatePage(date_param, page);
    });
@@ -39,23 +34,9 @@ poconsole.controller('cardListCtrl', function($scope, $routeParams, Card, Page)
            $scope.per_page = d.per_page;
            $scope.page_list = [];
            $scope.page_num = page_number;
-
-            if ($scope.page_num < $scope.num_pages){
-                $scope.page_num_next = $scope.page_num + 1;
-            } else {
-                $scope.page_num_next = $scope.num_pages;
-            }
-
-            if ($scope.page_num > 1){
-                $scope.page_num_prev = $scope.page_num - 1;
-            } else {
-                $scope.page_num_prev = 1;
-            }
+            $scope.total = d.total;

            $scope.date_param = date_p;
-            for(var i = 1; i <= d.num_pages; i++){
-                $scope.page_list.push(i);
-            }
        });
    };
 });
--- a/app/static/js/cards.factory.js
+++ b/app/static/js/cards.factory.js
@@ -1,5 +1,7 @@
 poconsole.factory('Card', function($q, $http, $log){
-    var getCardDates = function() {
+    var service = {};
+
+    service.getCardDates = function() {
        var deferred = $q.defer();
        $http.get('/api/card_dates').success(function(data) {
            var dateList = data;
@@ -9,7 +11,7 @@ poconsole.factory('Card', function($q, $http, $log){
        return deferred.promise;
    };

-    var getCardPageForDate = function(date_str, page_id){
+    service.getCardPageForDate = function(date_str, page_id){
        var deferred = $q.defer();
        $http.get('/api/cardsbydate/'+ date_str + "/" + page_id).success(function(data) {
            deferred.resolve(data);
@@ -17,7 +19,7 @@ poconsole.factory('Card', function($q, $http, $log){
        return deferred.promise;
    };

-    var getCard = function(id){
+    service.getCard = function(id){
        var deferred = $q.defer();
        $http.get('/api/cards/' + id).success(function(data) {
            deferred.resolve(data);
@@ -25,7 +27,7 @@ poconsole.factory('Card', function($q, $http, $log){
        return deferred.promise;
    };

-    var getCardGraphOptions = function(surface, downhole){
+    service.getCardGraphOptions = function(surface, downhole){
        var limits = {
            sMaxPos: surface.map(function(x){return x.position;}).reduce(function(y,z){return Math.max(y,z);})+ 20,
            sMinPos: surface.map(function(x){return x.position;}).reduce(function(y,z){return Math.min(y,z);})- 20,
@@ -110,10 +112,5 @@ poconsole.factory('Card', function($q, $http, $log){
    };


-    return {
-        getCardDates: getCardDates,
-        getCardPageForDate: getCardPageForDate,
-        getCard: getCard,
-        getCardGraphOptions: getCardGraphOptions
-    };
+    return service;
 });
--- a/app/static/js/config.controller.js
+++ b/app/static/js/config.controller.js
@@ -1,4 +1,4 @@
-poconsole.controller('configCtrl', function($scope, Page, $log, config, devices, tags) {
+poconsole.controller('configCtrl', function($scope, Page, $log, Config, Device, Tag) {
 	Page.setTitle('Configuration');
    Page.setPage('configuration');

@@ -6,7 +6,7 @@ poconsole.controller('configCtrl', function($scope, Page, $log, config, devices,

    $scope.loadConfig = function(){
        $scope.loading = true;
-        var getConfig = config.getConfig();
+        var getConfig = Config.getConfig();
        getConfig.then(function(data) {
        	$scope.loading = false;
    		$scope.config = data.config;
@@ -30,7 +30,7 @@ poconsole.controller('configCtrl', function($scope, Page, $log, config, devices,
            } else {
                $scope.newParam.parameter = $scope.newParam.pSelected;
            }
-            config.submitParameter($scope.newParam);
+            Config.submitParameter($scope.newParam);
            $scope.loadConfig();
 			$scope.newParam.pEntry = "";
 			$scope.newParam.val = "";
@@ -38,7 +38,7 @@ poconsole.controller('configCtrl', function($scope, Page, $log, config, devices,
    };

 	$scope.deleteParameter = function(id){
-		var deleteParam = config.deleteParameter(id);
+		var deleteParam = Config.deleteParameter(id);
 		deleteParam.then(function(d){
 			$scope.loadConfig();
 		});
@@ -46,7 +46,7 @@ poconsole.controller('configCtrl', function($scope, Page, $log, config, devices,

    $scope.checkLogger = function(){
        $scope.loggerLoading = true;
-        var checkLoggerStatus = config.getLoggerStatus();
+        var checkLoggerStatus = Config.getLoggerStatus();
        checkLoggerStatus.then(function(data){
            $scope.loggerLoading = false;
        	$scope.loggerRunning = data.status;
@@ -55,14 +55,14 @@ poconsole.controller('configCtrl', function($scope, Page, $log, config, devices,
    // $scope.checkLogger();

    $scope.restartLogger = function(){
-        var restartLogger = config.restartLogger();
+        var restartLogger = Config.restartLogger();
        restartLogger.then(function(data){
        	$scope.checkLogger();
        });
    };

    $scope.getDevices = function(){
-        var getDevices = devices.getAllDevices();
+        var getDevices = Device.getAllDevices();
        getDevices.then(function(d){
            $scope.devices = d.devices;
        });
@@ -71,7 +71,7 @@ poconsole.controller('configCtrl', function($scope, Page, $log, config, devices,


    $scope.addDevice = function(dev){
-        var addDevice = devices.addDevice(dev);
+        var addDevice = Device.addDevice(dev);
        addDevice.then(function(d){
            $scope.getDevices();
 			dev.address = "";
@@ -79,19 +79,19 @@ poconsole.controller('configCtrl', function($scope, Page, $log, config, devices,
    };

 	$scope.deleteDevice = function(id){
-		var deleteDevice = devices.deleteDevice(id);
+		var deleteDevice = Device.deleteDevice(id);
 		deleteDevice.then(function(d){
 			$scope.getDevices();
 		});
 	};

-    var getDeviceTypes = devices.getDeviceTypes();
+    var getDeviceTypes = Device.getDeviceTypes();
    getDeviceTypes.then(function(d){
        $scope.device_types = d.device_types;
    });

 	$scope.deleteAllTagData = function(){
-		var deleteAllTags = tags.clearAllTagData();
+		var deleteAllTags = Tag.clearAllTagData();
 		deleteAllTags.then(function(data){
 			$log.info(data);
 		});
--- a/app/static/js/config.factory.js
+++ b/app/static/js/config.factory.js
@@ -1,6 +1,6 @@
-poconsole.factory('config',function($q, $http, $log){
-
-    var getConfig = function(){
+poconsole.factory('Config',function($q, $http, $log){
+    var config = {};
+    config.getConfig = function(){
        var deferred = $q.defer();
        $http.get('/api/configs').success(function(data) {
        	deferred.resolve({
@@ -10,7 +10,7 @@ poconsole.factory('config',function($q, $http, $log){
        return deferred.promise;
    };

-    var submitParameter = function(entry){
+    config.submitParameter = function(entry){
        var deferred = $q.defer();
        $http.post('/api/configs', {
            parameter: entry.parameter,
@@ -23,7 +23,7 @@ poconsole.factory('config',function($q, $http, $log){
        return deferred.promise;
    };

-    var updateParameter = function(entry){
+    config.updateParameter = function(entry){
        var deferred = $q.defer();
        $http.put('/api/configs/' + entry._id, {
            parameter: entry.parameter,
@@ -36,7 +36,7 @@ poconsole.factory('config',function($q, $http, $log){
        return deferred.promise;
    };

-    var deleteParameter = function(id){
+    config.deleteParameter = function(id){
        var deferred = $q.defer();
        $http.delete('/api/configs/' + id).success(function(data){
            deferred.resolve({
@@ -46,7 +46,7 @@ poconsole.factory('config',function($q, $http, $log){
        return deferred.promise;
    };

-    var getLoggerStatus = function(){
+    config.getLoggerStatus = function(){
        var deferred = $q.defer();
        $http.get('/logger_status').success(function(data) {
    		deferred.resolve({
@@ -57,7 +57,7 @@ poconsole.factory('config',function($q, $http, $log){
        return deferred.promise;
    };

-    var restartLogger = function(){
+    config.restartLogger = function(){
        var deferred = $q.defer();
        $http.get('/restart_logger').success(function(data) {
        	deferred.resolve({
@@ -68,14 +68,6 @@ poconsole.factory('config',function($q, $http, $log){
    };


-    return {
-        getConfig:getConfig,
-        submitParameter: submitParameter,
-        getLoggerStatus: getLoggerStatus,
-        restartLogger: restartLogger,
-        updateParameter: updateParameter,
-        deleteParameter: deleteParameter
-
-    };
+    return config;

 });
--- a/app/static/js/dashboard.controller.js
+++ b/app/static/js/dashboard.controller.js
@@ -1,10 +1,10 @@
-poconsole.controller('dashboardCtrl', function($scope, $route, $http, Page, $log, tags) {
+poconsole.controller('dashboardCtrl', function($scope, $route, $http, Page, $log, Tag) {
    $log.info("Opened Dashboard");
 	Page.setTitle('Dashboard');
    Page.setPage('dashboard');
    $scope.loadDashboard = function(){
        $scope.loading = true;
-        var getCurrentValues = tags.getCurrentValues();
+        var getCurrentValues = Tag.getCurrentValues();
        getCurrentValues.then(function(data) {
        	$scope.loading = false;
        	$scope.vals = data.vals;
--- a/app/static/js/dateConversion.factory.js
+++ b/app/static/js/dateConversion.factory.js
@@ -1,5 +1,6 @@
 poconsole.factory('dateConversion', function(){
-    var sqliteDate = function(dString){
+    var service = {};
+    service.sqliteDate = function(dString){
    	/**
    		* Takes a date string in the form YYYYMMDD_HHmmSS and returns it in SQLite format (YYYY-MM-DD HH:mm:SS)
    		* @param {String} dString
@@ -15,7 +16,7 @@ poconsole.factory('dateConversion', function(){
    	}
    };

-    var mysqlDate = function(d){
+    service.mysqlDate = function(d){
        var year = d.getFullYear().pad(4);
    	var month = (d.getMonth() + 1).pad(2);
    	var day = d.getDate().pad(2);
@@ -25,7 +26,7 @@ poconsole.factory('dateConversion', function(){
        return "".concat(year, "-", month, "-", day, " ", hour, ":", min, ":", sec);
    };

-	var pythonDate = function(d){
+	service.pythonDate = function(d){
        var year = d.getUTCFullYear().pad(4);
    	var month = (d.getUTCMonth() + 1).pad(2);
    	var day = d.getUTCDate().pad(2);
@@ -34,9 +35,5 @@ poconsole.factory('dateConversion', function(){
    	var sec = d.getUTCSeconds().pad(2);
        return "".concat(year, "-", month, "-", day, " ", hour, ":", min, ":", sec, ".000");
    };
-    return {
-        mysqlDate: mysqlDate,
-        sqliteDate: sqliteDate,
-		pythonDate: pythonDate
-    };
+    return service;
 });
--- a/app/static/js/devices.factory.js
+++ b/app/static/js/devices.factory.js
@@ -1,5 +1,6 @@
-poconsole.factory('devices', function($q, $http, $log){
-    var getAllDevices = function(){
+poconsole.factory('Device', function($q, $http, $log){
+    var service = {};
+    service.getAllDevices = function(){
        var deferred = $q.defer();
        $http.get('/api/devices').success(function(data) {
            console.log({device:data.objects});
@@ -10,7 +11,7 @@ poconsole.factory('devices', function($q, $http, $log){
        return deferred.promise;
    };

-    var getDevice = function(id){
+    service.getDevice = function(id){
        var deferred = $q.defer();
        $http.get('/api/devices/'+ id).success(function(data) {
        	deferred.resolve({
@@ -20,7 +21,7 @@ poconsole.factory('devices', function($q, $http, $log){
        return deferred.promise;
    };

-    var addDevice = function(d){
+    service.addDevice = function(d){
        $log.info(d);
        var deferred = $q.defer();
        $http.post('/api/devices', {
@@ -34,7 +35,7 @@ poconsole.factory('devices', function($q, $http, $log){
        return deferred.promise;
    };

-    var updateDevice = function(d){
+    service.updateDevice = function(d){
        var deferred = $q.defer();
        $http.put('/api/devices/' + d._id, {
            address: d.address,
@@ -47,7 +48,7 @@ poconsole.factory('devices', function($q, $http, $log){
        return deferred.promise;
    };

-    var deleteDevice = function(id){
+    service.deleteDevice = function(id){
        var deferred = $q.defer();
        var url = '/api/devices/' + id;
        $http.delete(url).success(function(data) {
@@ -58,7 +59,7 @@ poconsole.factory('devices', function($q, $http, $log){
        return deferred.promise;
    };

-    var getDeviceTypes = function(){
+    service.getDeviceTypes = function(){
        var deferred = $q.defer();
        $http.get('/api/device_types').success(function(data) {
        	deferred.resolve({
@@ -69,13 +70,5 @@ poconsole.factory('devices', function($q, $http, $log){
    };


-    return {
-        getAllDevices : getAllDevices,
-        getDevice: getDevice,
-        addDevice: addDevice,
-        deleteDevice: deleteDevice,
-        updateDevice: updateDevice,
-        getDeviceTypes: getDeviceTypes
-
-    };
+    return service;
 });
--- a/app/static/js/docs.controller.js
+++ b/app/static/js/docs.controller.js
@@ -1,11 +1,11 @@
-poconsole.controller('docsCtrl', function($scope, $route, Page, $log, docs) {
+poconsole.controller('docsCtrl', function($scope, $route, Page, $log, Doc) {
    Page.setTitle('Documents');
    Page.setPage('docs');

    var file_types = ["_blank", "c", "dwg", "hpp", "key", "ods", "png", "rtf", "txt", "_page", "cpp", "dxf", "html", "less", "odt", "ppt", "sass", "wav", "aac", "css", "eps", "ics", "mid", "otp", "psd", "scss", "xls", "ai", "dat", "exe", "iso", "mp3", "ots", "py", "sql", "xlsx", "aiff", "dmg", "flv", "java", "mp4", "ott", "qt", "tga", "xml", "avi", "doc", "gif", "jpg", "mpg", "pdf", "rar", "tgz", "yml", "bmp", "dotx", "h", "js", "odf", "php", "rb", "tiff", "zip" ];

    $scope.loadDocs = function(){
-        var loadDocs = docs.getAllDocs();
+        var loadDocs = Doc.getAllDocs();
        loadDocs.then(function(d){
            var imageBase = "/images/icons/";
            var imageExtension = ".png";
@@ -37,7 +37,7 @@ poconsole.controller('docsCtrl', function($scope, $route, Page, $log, docs) {
    };

    $scope.deleteDoc = function(id){
-        var del = docs.deleteDoc(id);
+        var del = Doc.deleteDoc(id);
        del.then(function(d){
            $scope.loadDocs();
        });
--- a/app/static/js/docs.factory.js
+++ b/app/static/js/docs.factory.js
@@ -8,9 +8,10 @@ poconsole.factory('formDataObject', function() {
    };
 });

-poconsole.factory('docs',function($q, $http, $log, formDataObject){
+poconsole.factory('Doc',function($q, $http, $log, formDataObject){
+    var service = {};

-    var getAllDocs = function(){
+    service.getAllDocs = function(){
        var deferred = $q.defer();
        $http.get('/api/docs').success(function(data) {
        	deferred.resolve({
@@ -20,7 +21,7 @@ poconsole.factory('docs',function($q, $http, $log, formDataObject){
        return deferred.promise;
    };

-    var getDoc = function(id){
+    service.getDoc = function(id){
        var deferred = $q.defer();
        $http.get('/api/docs/' + id).success(function(data) {
        	deferred.resolve({
@@ -30,7 +31,7 @@ poconsole.factory('docs',function($q, $http, $log, formDataObject){
        return deferred.promise;
    };

-    var deleteDoc = function(id){
+    service.deleteDoc = function(id){
        var deferred = $q.defer();
        $http.delete('/api/docs/' + id).success(function(data) {
        	deferred.resolve({
@@ -41,10 +42,6 @@ poconsole.factory('docs',function($q, $http, $log, formDataObject){
    };


-    return {
-        getAllDocs:getAllDocs,
-        getDoc: getDoc,
-        deleteDoc: deleteDoc
-    };
+    return service;

 });
--- a/app/static/js/events.controller.js
+++ b/app/static/js/events.controller.js
@@ -22,22 +22,7 @@ poconsole.controller('eventsCtrl', function($scope, $q, $http, Page) {
            $scope.num_pages = d.total_pages;
            $scope.page_list = [];
            $scope.page_num = d.page;
-
-            if ($scope.page_num < $scope.num_pages){
-                $scope.page_num_next = $scope.page_num + 1;
-            } else {
-                $scope.page_num_next = $scope.num_pages;
-            }
-
-            if ($scope.page_num > 1){
-                $scope.page_num_prev = $scope.page_num - 1;
-            } else {
-                $scope.page_num_prev = 1;
-            }
-
-            for(var i = 1; i <= $scope.num_pages; i++){
-                $scope.page_list.push(i);
-            }
+            $scope.total = d.total;
        });
    };

--- a/app/static/js/gaugeoff.controller.js
+++ b/app/static/js/gaugeoff.controller.js
@@ -21,22 +21,7 @@ poconsole.controller('gaugeOffCtrl',function($scope, Page, $q, $http) {
            $scope.num_pages = d.total_pages;
            $scope.page_list = [];
            $scope.page_num = d.page;
-
-            if ($scope.page_num < $scope.num_pages){
-                $scope.page_num_next = $scope.page_num + 1;
-            } else {
-                $scope.page_num_next = $scope.num_pages;
-            }
-
-            if ($scope.page_num > 1){
-                $scope.page_num_prev = $scope.page_num - 1;
-            } else {
-                $scope.page_num_prev = 1;
-            }
-
-            for(var i = 1; i <= $scope.num_pages; i++){
-                $scope.page_list.push(i);
-            }
+            $scope.total = d.total;
        });
    };

--- a/app/static/js/lib/dirPagination.js
+++ b/app/static/js/lib/dirPagination.js
@@ -0,0 +1,639 @@
+/**
+ * dirPagination - AngularJS module for paginating (almost) anything.
+ *
+ *
+ * Credits
+ * =======
+ *
+ * Daniel Tabuenca: https://groups.google.com/d/msg/angular/an9QpzqIYiM/r8v-3W1X5vcJ
+ * for the idea on how to dynamically invoke the ng-repeat directive.
+ *
+ * I borrowed a couple of lines and a few attribute names from the AngularUI Bootstrap project:
+ * https://github.com/angular-ui/bootstrap/blob/master/src/pagination/pagination.js
+ *
+ * Copyright 2014 Michael Bromley <michael@michaelbromley.co.uk>
+ */
+
+(function() {
+
+    /**
+     * Config
+     */
+    var moduleName = 'angularUtils.directives.dirPagination';
+    var DEFAULT_ID = '__default';
+
+    /**
+     * Module
+     */
+    angular.module(moduleName, [])
+        .directive('dirPaginate', ['$compile', '$parse', 'paginationService', dirPaginateDirective])
+        .directive('dirPaginateNoCompile', noCompileDirective)
+        .directive('dirPaginationControls', ['paginationService', 'paginationTemplate', dirPaginationControlsDirective])
+        .filter('itemsPerPage', ['paginationService', itemsPerPageFilter])
+        .service('paginationService', paginationService)
+        .provider('paginationTemplate', paginationTemplateProvider)
+        .run(['$templateCache',dirPaginationControlsTemplateInstaller]);
+
+    function dirPaginateDirective($compile, $parse, paginationService) {
+
+        return  {
+            terminal: true,
+            multiElement: true,
+            priority: 100,
+            compile: dirPaginationCompileFn
+        };
+
+        function dirPaginationCompileFn(tElement, tAttrs){
+
+            var expression = tAttrs.dirPaginate;
+            // regex taken directly from https://github.com/angular/angular.js/blob/v1.4.x/src/ng/directive/ngRepeat.js#L339
+            var match = expression.match(/^\s*([\s\S]+?)\s+in\s+([\s\S]+?)(?:\s+as\s+([\s\S]+?))?(?:\s+track\s+by\s+([\s\S]+?))?\s*$/);
+
+            var filterPattern = /\|\s*itemsPerPage\s*:\s*(.*\(\s*\w*\)|([^\)]*?(?=\s+as\s+))|[^\)]*)/;
+            if (match[2].match(filterPattern) === null) {
+                throw 'pagination directive: the \'itemsPerPage\' filter must be set.';
+            }
+            var itemsPerPageFilterRemoved = match[2].replace(filterPattern, '');
+            var collectionGetter = $parse(itemsPerPageFilterRemoved);
+
+            addNoCompileAttributes(tElement);
+
+            // If any value is specified for paginationId, we register the un-evaluated expression at this stage for the benefit of any
+            // dir-pagination-controls directives that may be looking for this ID.
+            var rawId = tAttrs.paginationId || DEFAULT_ID;
+            paginationService.registerInstance(rawId);
+
+            return function dirPaginationLinkFn(scope, element, attrs){
+
+                // Now that we have access to the `scope` we can interpolate any expression given in the paginationId attribute and
+                // potentially register a new ID if it evaluates to a different value than the rawId.
+                var paginationId = $parse(attrs.paginationId)(scope) || attrs.paginationId || DEFAULT_ID;
+                
+                // (TODO: this seems sound, but I'm reverting as many bug reports followed it's introduction in 0.11.0.
+                // Needs more investigation.)
+                // In case rawId != paginationId we deregister using rawId for the sake of general cleanliness
+                // before registering using paginationId
+                // paginationService.deregisterInstance(rawId);
+                paginationService.registerInstance(paginationId);
+
+                var repeatExpression = getRepeatExpression(expression, paginationId);
+                addNgRepeatToElement(element, attrs, repeatExpression);
+
+                removeTemporaryAttributes(element);
+                var compiled =  $compile(element);
+
+                var currentPageGetter = makeCurrentPageGetterFn(scope, attrs, paginationId);
+                paginationService.setCurrentPageParser(paginationId, currentPageGetter, scope);
+
+                if (typeof attrs.totalItems !== 'undefined') {
+                    paginationService.setAsyncModeTrue(paginationId);
+                    scope.$watch(function() {
+                        return $parse(attrs.totalItems)(scope);
+                    }, function (result) {
+                        if (0 <= result) {
+                            paginationService.setCollectionLength(paginationId, result);
+                        }
+                    });
+                } else {
+                    paginationService.setAsyncModeFalse(paginationId);
+                    scope.$watchCollection(function() {
+                        return collectionGetter(scope);
+                    }, function(collection) {
+                        if (collection) {
+                            var collectionLength = (collection instanceof Array) ? collection.length : Object.keys(collection).length;
+                            paginationService.setCollectionLength(paginationId, collectionLength);
+                        }
+                    });
+                }
+
+                // Delegate to the link function returned by the new compilation of the ng-repeat
+                compiled(scope);
+                 
+                // (TODO: Reverting this due to many bug reports in v 0.11.0. Needs investigation as the
+                // principle is sound)
+                // When the scope is destroyed, we make sure to remove the reference to it in paginationService
+                // so that it can be properly garbage collected
+                // scope.$on('$destroy', function destroyDirPagination() {
+                //     paginationService.deregisterInstance(paginationId);
+                // });
+            };
+        }
+
+        /**
+         * If a pagination id has been specified, we need to check that it is present as the second argument passed to
+         * the itemsPerPage filter. If it is not there, we add it and return the modified expression.
+         *
+         * @param expression
+         * @param paginationId
+         * @returns {*}
+         */
+        function getRepeatExpression(expression, paginationId) {
+            var repeatExpression,
+                idDefinedInFilter = !!expression.match(/(\|\s*itemsPerPage\s*:[^|]*:[^|]*)/);
+
+            if (paginationId !== DEFAULT_ID && !idDefinedInFilter) {
+                repeatExpression = expression.replace(/(\|\s*itemsPerPage\s*:\s*[^|\s]*)/, "$1 : '" + paginationId + "'");
+            } else {
+                repeatExpression = expression;
+            }
+
+            return repeatExpression;
+        }
+
+        /**
+         * Adds the ng-repeat directive to the element. In the case of multi-element (-start, -end) it adds the
+         * appropriate multi-element ng-repeat to the first and last element in the range.
+         * @param element
+         * @param attrs
+         * @param repeatExpression
+         */
+        function addNgRepeatToElement(element, attrs, repeatExpression) {
+            if (element[0].hasAttribute('dir-paginate-start') || element[0].hasAttribute('data-dir-paginate-start')) {
+                // using multiElement mode (dir-paginate-start, dir-paginate-end)
+                attrs.$set('ngRepeatStart', repeatExpression);
+                element.eq(element.length - 1).attr('ng-repeat-end', true);
+            } else {
+                attrs.$set('ngRepeat', repeatExpression);
+            }
+        }
+
+        /**
+         * Adds the dir-paginate-no-compile directive to each element in the tElement range.
+         * @param tElement
+         */
+        function addNoCompileAttributes(tElement) {
+            angular.forEach(tElement, function(el) {
+                if (el.nodeType === 1) {
+                    angular.element(el).attr('dir-paginate-no-compile', true);
+                }
+            });
+        }
+
+        /**
+         * Removes the variations on dir-paginate (data-, -start, -end) and the dir-paginate-no-compile directives.
+         * @param element
+         */
+        function removeTemporaryAttributes(element) {
+            angular.forEach(element, function(el) {
+                if (el.nodeType === 1) {
+                    angular.element(el).removeAttr('dir-paginate-no-compile');
+                }
+            });
+            element.eq(0).removeAttr('dir-paginate-start').removeAttr('dir-paginate').removeAttr('data-dir-paginate-start').removeAttr('data-dir-paginate');
+            element.eq(element.length - 1).removeAttr('dir-paginate-end').removeAttr('data-dir-paginate-end');
+        }
+
+        /**
+         * Creates a getter function for the current-page attribute, using the expression provided or a default value if
+         * no current-page expression was specified.
+         *
+         * @param scope
+         * @param attrs
+         * @param paginationId
+         * @returns {*}
+         */
+        function makeCurrentPageGetterFn(scope, attrs, paginationId) {
+            var currentPageGetter;
+            if (attrs.currentPage) {
+                currentPageGetter = $parse(attrs.currentPage);
+            } else {
+                // If the current-page attribute was not set, we'll make our own.
+                // Replace any non-alphanumeric characters which might confuse
+                // the $parse service and give unexpected results.
+                // See https://github.com/michaelbromley/angularUtils/issues/233
+                var defaultCurrentPage = (paginationId + '__currentPage').replace(/\W/g, '_');
+                scope[defaultCurrentPage] = 1;
+                currentPageGetter = $parse(defaultCurrentPage);
+            }
+            return currentPageGetter;
+        }
+    }
+
+    /**
+     * This is a helper directive that allows correct compilation when in multi-element mode (ie dir-paginate-start, dir-paginate-end).
+     * It is dynamically added to all elements in the dir-paginate compile function, and it prevents further compilation of
+     * any inner directives. It is then removed in the link function, and all inner directives are then manually compiled.
+     */
+    function noCompileDirective() {
+        return {
+            priority: 5000,
+            terminal: true
+        };
+    }
+
+    function dirPaginationControlsTemplateInstaller($templateCache) {
+        $templateCache.put('angularUtils.directives.dirPagination.template', '<ul class="pagination" ng-if="1 < pages.length || !autoHide"><li ng-if="boundaryLinks" ng-class="{ disabled : pagination.current == 1 }"><a href="" ng-click="setCurrent(1)">&laquo;</a></li><li ng-if="directionLinks" ng-class="{ disabled : pagination.current == 1 }"><a href="" ng-click="setCurrent(pagination.current - 1)">&lsaquo;</a></li><li ng-repeat="pageNumber in pages track by tracker(pageNumber, $index)" ng-class="{ active : pagination.current == pageNumber, disabled : pageNumber == \'...\' || ( ! autoHide && pages.length === 1 ) }"><a href="" ng-click="setCurrent(pageNumber)">{{ pageNumber }}</a></li><li ng-if="directionLinks" ng-class="{ disabled : pagination.current == pagination.last }"><a href="" ng-click="setCurrent(pagination.current + 1)">&rsaquo;</a></li><li ng-if="boundaryLinks"  ng-class="{ disabled : pagination.current == pagination.last }"><a href="" ng-click="setCurrent(pagination.last)">&raquo;</a></li></ul>');
+    }
+
+    function dirPaginationControlsDirective(paginationService, paginationTemplate) {
+
+        var numberRegex = /^\d+$/;
+
+        var DDO = {
+            restrict: 'AE',
+            scope: {
+                maxSize: '=?',
+                onPageChange: '&?',
+                paginationId: '=?',
+                autoHide: '=?'
+            },
+            link: dirPaginationControlsLinkFn
+        };
+
+        // We need to check the paginationTemplate service to see whether a template path or
+        // string has been specified, and add the `template` or `templateUrl` property to
+        // the DDO as appropriate. The order of priority to decide which template to use is
+        // (highest priority first):
+        // 1. paginationTemplate.getString()
+        // 2. attrs.templateUrl
+        // 3. paginationTemplate.getPath()
+        var templateString = paginationTemplate.getString();
+        if (templateString !== undefined) {
+            DDO.template = templateString;
+        } else {
+            DDO.templateUrl = function(elem, attrs) {
+                return attrs.templateUrl || paginationTemplate.getPath();
+            };
+        }
+        return DDO;
+
+        function dirPaginationControlsLinkFn(scope, element, attrs) {
+
+            // rawId is the un-interpolated value of the pagination-id attribute. This is only important when the corresponding dir-paginate directive has
+            // not yet been linked (e.g. if it is inside an ng-if block), and in that case it prevents this controls directive from assuming that there is
+            // no corresponding dir-paginate directive and wrongly throwing an exception.
+            var rawId = attrs.paginationId ||  DEFAULT_ID;
+            var paginationId = scope.paginationId || attrs.paginationId ||  DEFAULT_ID;
+
+            if (!paginationService.isRegistered(paginationId) && !paginationService.isRegistered(rawId)) {
+                var idMessage = (paginationId !== DEFAULT_ID) ? ' (id: ' + paginationId + ') ' : ' ';
+                if (window.console) {
+                    console.warn('Pagination directive: the pagination controls' + idMessage + 'cannot be used without the corresponding pagination directive, which was not found at link time.');
+                }
+            }
+
+            if (!scope.maxSize) { scope.maxSize = 9; }
+            scope.autoHide = scope.autoHide === undefined ? true : scope.autoHide;
+            scope.directionLinks = angular.isDefined(attrs.directionLinks) ? scope.$parent.$eval(attrs.directionLinks) : true;
+            scope.boundaryLinks = angular.isDefined(attrs.boundaryLinks) ? scope.$parent.$eval(attrs.boundaryLinks) : false;
+
+            var paginationRange = Math.max(scope.maxSize, 5);
+            scope.pages = [];
+            scope.pagination = {
+                last: 1,
+                current: 1
+            };
+            scope.range = {
+                lower: 1,
+                upper: 1,
+                total: 1
+            };
+
+            scope.$watch('maxSize', function(val) {
+                if (val) {
+                    paginationRange = Math.max(scope.maxSize, 5);
+                    generatePagination();
+                }
+            });
+
+            scope.$watch(function() {
+                if (paginationService.isRegistered(paginationId)) {
+                    return (paginationService.getCollectionLength(paginationId) + 1) * paginationService.getItemsPerPage(paginationId);
+                }
+            }, function(length) {
+                if (0 < length) {
+                    generatePagination();
+                }
+            });
+
+            scope.$watch(function() {
+                if (paginationService.isRegistered(paginationId)) {
+                    return (paginationService.getItemsPerPage(paginationId));
+                }
+            }, function(current, previous) {
+                if (current != previous && typeof previous !== 'undefined') {
+                    goToPage(scope.pagination.current);
+                }
+            });
+
+            scope.$watch(function() {
+                if (paginationService.isRegistered(paginationId)) {
+                    return paginationService.getCurrentPage(paginationId);
+                }
+            }, function(currentPage, previousPage) {
+                if (currentPage != previousPage) {
+                    goToPage(currentPage);
+                }
+            });
+
+            scope.setCurrent = function(num) {
+                if (paginationService.isRegistered(paginationId) && isValidPageNumber(num)) {
+                    num = parseInt(num, 10);
+                    paginationService.setCurrentPage(paginationId, num);
+                }
+            };
+
+            /**
+             * Custom "track by" function which allows for duplicate "..." entries on long lists,
+             * yet fixes the problem of wrongly-highlighted links which happens when using
+             * "track by $index" - see https://github.com/michaelbromley/angularUtils/issues/153
+             * @param id
+             * @param index
+             * @returns {string}
+             */
+            scope.tracker = function(id, index) {
+                return id + '_' + index;
+            };
+
+            function goToPage(num) {
+                if (paginationService.isRegistered(paginationId) && isValidPageNumber(num)) {
+                    var oldPageNumber = scope.pagination.current;
+
+                    scope.pages = generatePagesArray(num, paginationService.getCollectionLength(paginationId), paginationService.getItemsPerPage(paginationId), paginationRange);
+                    scope.pagination.current = num;
+                    updateRangeValues();
+
+                    // if a callback has been set, then call it with the page number as the first argument
+                    // and the previous page number as a second argument
+                    if (scope.onPageChange) {
+                        scope.onPageChange({
+                            newPageNumber : num,
+                            oldPageNumber : oldPageNumber
+                        });
+                    }
+                }
+            }
+
+            function generatePagination() {
+                if (paginationService.isRegistered(paginationId)) {
+                    var page = parseInt(paginationService.getCurrentPage(paginationId)) || 1;
+                    scope.pages = generatePagesArray(page, paginationService.getCollectionLength(paginationId), paginationService.getItemsPerPage(paginationId), paginationRange);
+                    scope.pagination.current = page;
+                    scope.pagination.last = scope.pages[scope.pages.length - 1];
+                    if (scope.pagination.last < scope.pagination.current) {
+                        scope.setCurrent(scope.pagination.last);
+                    } else {
+                        updateRangeValues();
+                    }
+                }
+            }
+
+            /**
+             * This function updates the values (lower, upper, total) of the `scope.range` object, which can be used in the pagination
+             * template to display the current page range, e.g. "showing 21 - 40 of 144 results";
+             */
+            function updateRangeValues() {
+                if (paginationService.isRegistered(paginationId)) {
+                    var currentPage = paginationService.getCurrentPage(paginationId),
+                        itemsPerPage = paginationService.getItemsPerPage(paginationId),
+                        totalItems = paginationService.getCollectionLength(paginationId);
+
+                    scope.range.lower = (currentPage - 1) * itemsPerPage + 1;
+                    scope.range.upper = Math.min(currentPage * itemsPerPage, totalItems);
+                    scope.range.total = totalItems;
+                }
+            }
+            function isValidPageNumber(num) {
+                return (numberRegex.test(num) && (0 < num && num <= scope.pagination.last));
+            }
+        }
+
+        /**
+         * Generate an array of page numbers (or the '...' string) which is used in an ng-repeat to generate the
+         * links used in pagination
+         *
+         * @param currentPage
+         * @param rowsPerPage
+         * @param paginationRange
+         * @param collectionLength
+         * @returns {Array}
+         */
+        function generatePagesArray(currentPage, collectionLength, rowsPerPage, paginationRange) {
+            var pages = [];
+            var totalPages = Math.ceil(collectionLength / rowsPerPage);
+            var halfWay = Math.ceil(paginationRange / 2);
+            var position;
+
+            if (currentPage <= halfWay) {
+                position = 'start';
+            } else if (totalPages - halfWay < currentPage) {
+                position = 'end';
+            } else {
+                position = 'middle';
+            }
+
+            var ellipsesNeeded = paginationRange < totalPages;
+            var i = 1;
+            while (i <= totalPages && i <= paginationRange) {
+                var pageNumber = calculatePageNumber(i, currentPage, paginationRange, totalPages);
+
+                var openingEllipsesNeeded = (i === 2 && (position === 'middle' || position === 'end'));
+                var closingEllipsesNeeded = (i === paginationRange - 1 && (position === 'middle' || position === 'start'));
+                if (ellipsesNeeded && (openingEllipsesNeeded || closingEllipsesNeeded)) {
+                    pages.push('...');
+                } else {
+                    pages.push(pageNumber);
+                }
+                i ++;
+            }
+            return pages;
+        }
+
+        /**
+         * Given the position in the sequence of pagination links [i], figure out what page number corresponds to that position.
+         *
+         * @param i
+         * @param currentPage
+         * @param paginationRange
+         * @param totalPages
+         * @returns {*}
+         */
+        function calculatePageNumber(i, currentPage, paginationRange, totalPages) {
+            var halfWay = Math.ceil(paginationRange/2);
+            if (i === paginationRange) {
+                return totalPages;
+            } else if (i === 1) {
+                return i;
+            } else if (paginationRange < totalPages) {
+                if (totalPages - halfWay < currentPage) {
+                    return totalPages - paginationRange + i;
+                } else if (halfWay < currentPage) {
+                    return currentPage - halfWay + i;
+                } else {
+                    return i;
+                }
+            } else {
+                return i;
+            }
+        }
+    }
+
+    /**
+     * This filter slices the collection into pages based on the current page number and number of items per page.
+     * @param paginationService
+     * @returns {Function}
+     */
+    function itemsPerPageFilter(paginationService) {
+
+        return function(collection, itemsPerPage, paginationId) {
+            if (typeof (paginationId) === 'undefined') {
+                paginationId = DEFAULT_ID;
+            }
+            if (!paginationService.isRegistered(paginationId)) {
+                throw 'pagination directive: the itemsPerPage id argument (id: ' + paginationId + ') does not match a registered pagination-id.';
+            }
+            var end;
+            var start;
+            if (angular.isObject(collection)) {
+                itemsPerPage = parseInt(itemsPerPage) || 9999999999;
+                if (paginationService.isAsyncMode(paginationId)) {
+                    start = 0;
+                } else {
+                    start = (paginationService.getCurrentPage(paginationId) - 1) * itemsPerPage;
+                }
+                end = start + itemsPerPage;
+                paginationService.setItemsPerPage(paginationId, itemsPerPage);
+
+                if (collection instanceof Array) {
+                    // the array just needs to be sliced
+                    return collection.slice(start, end);
+                } else {
+                    // in the case of an object, we need to get an array of keys, slice that, then map back to
+                    // the original object.
+                    var slicedObject = {};
+                    angular.forEach(keys(collection).slice(start, end), function(key) {
+                        slicedObject[key] = collection[key];
+                    });
+                    return slicedObject;
+                }
+            } else {
+                return collection;
+            }
+        };
+    }
+
+    /**
+     * Shim for the Object.keys() method which does not exist in IE < 9
+     * @param obj
+     * @returns {Array}
+     */
+    function keys(obj) {
+        if (!Object.keys) {
+            var objKeys = [];
+            for (var i in obj) {
+                if (obj.hasOwnProperty(i)) {
+                    objKeys.push(i);
+                }
+            }
+            return objKeys;
+        } else {
+            return Object.keys(obj);
+        }
+    }
+
+    /**
+     * This service allows the various parts of the module to communicate and stay in sync.
+     */
+    function paginationService() {
+
+        var instances = {};
+        var lastRegisteredInstance;
+
+        this.registerInstance = function(instanceId) {
+            if (typeof instances[instanceId] === 'undefined') {
+                instances[instanceId] = {
+                    asyncMode: false
+                };
+                lastRegisteredInstance = instanceId;
+            }
+        };
+
+        this.deregisterInstance = function(instanceId) {
+            delete instances[instanceId];
+        };
+        
+        this.isRegistered = function(instanceId) {
+            return (typeof instances[instanceId] !== 'undefined');
+        };
+
+        this.getLastInstanceId = function() {
+            return lastRegisteredInstance;
+        };
+
+        this.setCurrentPageParser = function(instanceId, val, scope) {
+            instances[instanceId].currentPageParser = val;
+            instances[instanceId].context = scope;
+        };
+        this.setCurrentPage = function(instanceId, val) {
+            instances[instanceId].currentPageParser.assign(instances[instanceId].context, val);
+        };
+        this.getCurrentPage = function(instanceId) {
+            var parser = instances[instanceId].currentPageParser;
+            return parser ? parser(instances[instanceId].context) : 1;
+        };
+
+        this.setItemsPerPage = function(instanceId, val) {
+            instances[instanceId].itemsPerPage = val;
+        };
+        this.getItemsPerPage = function(instanceId) {
+            return instances[instanceId].itemsPerPage;
+        };
+
+        this.setCollectionLength = function(instanceId, val) {
+            instances[instanceId].collectionLength = val;
+        };
+        this.getCollectionLength = function(instanceId) {
+            return instances[instanceId].collectionLength;
+        };
+
+        this.setAsyncModeTrue = function(instanceId) {
+            instances[instanceId].asyncMode = true;
+        };
+
+        this.setAsyncModeFalse = function(instanceId) {
+            instances[instanceId].asyncMode = false;
+        };
+
+        this.isAsyncMode = function(instanceId) {
+            return instances[instanceId].asyncMode;
+        };
+    }
+
+    /**
+     * This provider allows global configuration of the template path used by the dir-pagination-controls directive.
+     */
+    function paginationTemplateProvider() {
+
+        var templatePath = 'angularUtils.directives.dirPagination.template';
+        var templateString;
+
+        /**
+         * Set a templateUrl to be used by all instances of <dir-pagination-controls>
+         * @param {String} path
+         */
+        this.setPath = function(path) {
+            templatePath = path;
+        };
+
+        /**
+         * Set a string of HTML to be used as a template by all instances
+         * of <dir-pagination-controls>. If both a path *and* a string have been set,
+         * the string takes precedence.
+         * @param {String} str
+         */
+        this.setString = function(str) {
+            templateString = str;
+        };
+
+        this.$get = function() {
+            return {
+                getPath: function() {
+                    return templatePath;
+                },
+                getString: function() {
+                    return templateString;
+                }
+            };
+        };
+    }
+})();
--- a/app/static/js/lib/dirPagination.tpl.html
+++ b/app/static/js/lib/dirPagination.tpl.html
@@ -0,0 +1,18 @@
+<ul class="pagination" ng-if="1 < pages.length || !autoHide">
+    <li ng-if="boundaryLinks" ng-class="{ disabled : pagination.current == 1 }">
+        <a href="" ng-click="setCurrent(1)">&laquo;</a>
+    </li>
+    <li ng-if="directionLinks" ng-class="{ disabled : pagination.current == 1 }">
+        <a href="" ng-click="setCurrent(pagination.current - 1)">&lsaquo;</a>
+    </li>
+    <li ng-repeat="pageNumber in pages track by tracker(pageNumber, $index)" ng-class="{ active : pagination.current == pageNumber, disabled : pageNumber == '...' }">
+        <a href="" ng-click="setCurrent(pageNumber)">{{ pageNumber }}</a>
+    </li>
+
+    <li ng-if="directionLinks" ng-class="{ disabled : pagination.current == pagination.last }">
+        <a href="" ng-click="setCurrent(pagination.current + 1)">&rsaquo;</a>
+    </li>
+    <li ng-if="boundaryLinks"  ng-class="{ disabled : pagination.current == pagination.last }">
+        <a href="" ng-click="setCurrent(pagination.last)">&raquo;</a>
+    </li>
+</ul>
--- a/app/static/js/main.controller.js
+++ b/app/static/js/main.controller.js
@@ -1,4 +1,4 @@
-var poconsole = angular.module('poconsole', ['ngJustGage', 'n3-line-chart', "ngQuickDate"]);
+var poconsole = angular.module('poconsole', ['ngJustGage', 'n3-line-chart', "ngQuickDate", 'angularUtils.directives.dirPagination']);


 poconsole.config(function(ngQuickDateDefaultsProvider) {
@@ -16,6 +16,10 @@ poconsole.config(function(ngQuickDateDefaultsProvider) {
  });
 });

+poconsole.config(function(paginationTemplateProvider) {
+    paginationTemplateProvider.setPath('js/lib/dirPagination.tpl.html');
+});
+

 poconsole.controller('mainCtrl', function($scope, Page) {
    $scope.Page = Page;
--- a/app/static/js/notes.controller.js
+++ b/app/static/js/notes.controller.js
@@ -14,22 +14,7 @@ poconsole.controller('notesCtrl', function($scope, Page, Note) {
            $scope.num_pages = d.total_pages;
            $scope.page_list = [];
            $scope.page_num = d.page;
-
-            if ($scope.page_num < $scope.num_pages){
-                $scope.page_num_next = $scope.page_num + 1;
-            } else {
-                $scope.page_num_next = $scope.num_pages;
-            }
-
-            if ($scope.page_num > 1){
-                $scope.page_num_prev = $scope.page_num - 1;
-            } else {
-                $scope.page_num_prev = 1;
-            }
-
-            for(var i = 1; i <= $scope.num_pages; i++){
-                $scope.page_list.push(i);
-            }
+			$scope.total = d.total;
        });
    };

--- a/app/static/js/notes.factory.js
+++ b/app/static/js/notes.factory.js
@@ -1,5 +1,6 @@
 poconsole.factory('Note',function($q, $http, $log){
-	var getNotesPage = function(page_number) {
+	var service = {};
+	service.getNotesPage = function(page_number) {
        var deferred = $q.defer();
        $http.get('/api/notes?q={"order_by":[{"field":"created_on","direction":"desc"}]}&page=' + page_number).success(function(data) {
        	deferred.resolve(data);
@@ -7,7 +8,7 @@ poconsole.factory('Note',function($q, $http, $log){
        return deferred.promise;
    };

-    var getNote = function(id){
+    service.getNote = function(id){
        var deferred = $q.defer();
        $http.get('/api/notes/' + id).success(function(data) {
        	deferred.resolve(data);
@@ -15,7 +16,7 @@ poconsole.factory('Note',function($q, $http, $log){
        return deferred.promise;
    };

-    var createNote = function(n){
+    service.createNote = function(n){
        var deferred = $q.defer();
        var note_obj = {
            'note_text': n.note_text,
@@ -28,7 +29,7 @@ poconsole.factory('Note',function($q, $http, $log){
        return deferred.promise;
    };

-    var updateNote = function(n){
+    service.updateNote = function(n){
        var deferred = $q.defer();
        var note_obj = {
            'note_text': n.note_text,
@@ -41,7 +42,7 @@ poconsole.factory('Note',function($q, $http, $log){
        return deferred.promise;
    };

-    var deleteNote = function(id){
+    service.deleteNote = function(id){
        var deferred = $q.defer();
        var url = '/api/notes/' + id;
        $http.delete(url).success(function(data) {
@@ -54,11 +55,5 @@ poconsole.factory('Note',function($q, $http, $log){



-    return {
-    	getNotesPage: getNotesPage,
-        getNote: getNote,
-        createNote: createNote,
-    	deleteNote: deleteNote,
-        updateNote: updateNote
-    };
+    return service;
 });
--- a/app/static/js/tagVals.controller.js
+++ b/app/static/js/tagVals.controller.js
@@ -1,4 +1,4 @@
-poconsole.controller('tagValsCtrl', function($scope, $route, $http, $routeParams, Page, $log, tags, dateConversion) {
+poconsole.controller('tagValsCtrl', function($scope, $route, $http, $routeParams, Page, $log, Tag, dateConversion) {
 	Page.setTitle('Tag Series');
    Page.setPage('tags');
    var colors = ['#d7191c','#fdae61','#abdda4','#2b83ba'];
@@ -30,14 +30,13 @@ poconsole.controller('tagValsCtrl', function($scope, $route, $http, $routeParams
        $scope.tags_to_get = tags_to_get;

        // the get multiple tags will return the db entry for all tags in the list
-    	var getMultipleTags = tags.getMultipleTags(tags_to_get);
+    	var getMultipleTags = Tag.getMultipleTags(tags_to_get);
    	getMultipleTags.then(function(tagData){
 			var tagDefData = tagData.tag; // assigns the tag definition data to tagDefData

            //get the tag history between the two datetimes for the specified tags
-		    var getTagHistoryBetween = tags.getTagHistoryBetween(tags_to_get, dateConversion.pythonDate(sDTime), dateConversion.pythonDate(eDTime));
+		    var getTagHistoryBetween = Tag.getTagHistoryBetween(tags_to_get, dateConversion.pythonDate(sDTime), dateConversion.pythonDate(eDTime));
 		    getTagHistoryBetween.then(function(data) {
-
                // this map takes all values that were returned from getTagHistoryBetween and creates an object with all possible tags
                // for all tags other than the one measured, the value is null
 				$scope.table_vals = data.vals.map(function(x){
--- a/app/static/js/tags.controller.js
+++ b/app/static/js/tags.controller.js
@@ -1,9 +1,12 @@
-poconsole.controller('tagsCtrl', function($scope, $route, $http, $routeParams, Page, $log, tags, devices) {
+poconsole.controller('tagsCtrl', function($scope, $route, $http, $routeParams, Page, $log, Tag, Device) {
 	Page.setTitle('Tags');
    Page.setPage('tags');
+
+	$scope.data_types = [ 'REAL', 'INT', 'BOOL', 'STRING' ];
+
    $scope.loadTagList = function(){
    	$scope.loading = true;
-        var getTagList = tags.getTagList();
+        var getTagList = Tag.getTagList();
        getTagList.then(function(data) {
        	$scope.loading = false;
        	$scope.tags = data.tags;
@@ -11,24 +14,19 @@ poconsole.controller('tagsCtrl', function($scope, $route, $http, $routeParams, P
    };
    $scope.loadTagList();

-    var getDataTypes = tags.getDataTypes();
-    getDataTypes.then(function(d){
-        $scope.data_types = d.data_types;
-    });
-
-    var getAllDevices = devices.getAllDevices();
+    var getAllDevices = Device.getAllDevices();
    getAllDevices.then(function(d){
        $scope.devices = d.devices;
    });

    $scope.submitAddTag = function(){
-        var createStatus = tags.createTag($scope.newTag);
+        var createStatus = Tag.createTag($scope.newTag);
        $scope.createStatus = createStatus.status;
        $scope.loadTagList();
    };

    $scope.openDeleteTag = function(id){
-        var getTag = tags.getTag(id);
+        var getTag = Tag.getTag(id);
        getTag.then(function(data){
            $scope.error = false;
            $scope.dTag = data.tag;
@@ -37,7 +35,7 @@ poconsole.controller('tagsCtrl', function($scope, $route, $http, $routeParams, P
    };

    $scope.deleteTag = function(id){
-        var deleteTag = tags.deleteTag(id);
+        var deleteTag = Tag.deleteTag(id);
        deleteTag.then(function(data){
            $log.info("deleting tag "+ id + " status: " + data.status);
            $scope.error = false;
@@ -46,7 +44,7 @@ poconsole.controller('tagsCtrl', function($scope, $route, $http, $routeParams, P
    };

    $scope.openClearTagData = function(id){
-        var getTag = tags.getTag(id);
+        var getTag = Tag.getTag(id);
        getTag.then(function(data){
            $scope.error = false;
            $scope.dTagValues = data.tag;
@@ -55,7 +53,7 @@ poconsole.controller('tagsCtrl', function($scope, $route, $http, $routeParams, P
    };

    $scope.deleteTagValues = function(id){
-        var clearSingleTagData = tags.clearSingleTagData(id);
+        var clearSingleTagData = Tag.clearSingleTagData(id);
        clearSingleTagData.then(function(data){
            $log.info("deleting tag "+ id + " status: " + data.status);
            $scope.error = false;
@@ -64,17 +62,16 @@ poconsole.controller('tagsCtrl', function($scope, $route, $http, $routeParams, P
    };

    $scope.openEditTag = function(id){
-        var getTag = tags.getTag(id);
+        var getTag = Tag.getTag(id);
        getTag.then(function(data){
            $scope.error = false;
            $scope.editTag = data.tag;
-            console.log(typeof data.tag.device_id);
            $log.info("Started editing tag with parameters: "+ JSON.stringify($scope.editTag));
        });
    };

    $scope.submitEditTag = function(){
-        var editStatus = tags.updateTag($scope.editTag);
+        var editStatus = Tag.updateTag($scope.editTag);
        $scope.loadTagList();
    };

--- a/app/static/js/tags.factory.js
+++ b/app/static/js/tags.factory.js
@@ -1,10 +1,12 @@
-var makeDateinObject = function(ob){
-    ob.datetime= new Date(ob.datetime);
-    return ob;
-};
+poconsole.factory('Tag',function($q, $http, $log, dateConversion){
+    var service = {};

-poconsole.factory('tags',function($q, $http, $log, dateConversion){
-	var getTag = function(id) {
+    var makeDateinObject = function(ob){
+        ob.datetime= new Date(ob.datetime);
+        return ob;
+    };
+
+	service.getTag = function(id) {
        var deferred = $q.defer();
        $http.get('/api/tags/' + id).success(function(data) {
            console.log(data);
@@ -15,7 +17,7 @@ poconsole.factory('tags',function($q, $http, $log, dateConversion){
        return deferred.promise;
    };

-    var getMultipleTags = function(ids){
+    service.getMultipleTags = function(ids){
        var deferred = $q.defer();
        $http.get('/api/multipletags/' + ids).success(function(data) {
        	deferred.resolve({
@@ -25,7 +27,7 @@ poconsole.factory('tags',function($q, $http, $log, dateConversion){
        return deferred.promise;
    };

-    var getTagList = function() {
+    service.getTagList = function() {
        var deferred = $q.defer();
        $http.get('/api/tags').success(function(data) {
        	deferred.resolve({
@@ -35,17 +37,7 @@ poconsole.factory('tags',function($q, $http, $log, dateConversion){
        return deferred.promise;
    };

-    var getDataTypes = function() {
-        var deferred = $q.defer();
-        $http.get('/api/data_types').success(function(data) {
-        	deferred.resolve({
-    			data_types:data.objects
-    		});
-        });
-        return deferred.promise;
-    };
-
-    var getTagHistoryBetween = function(id, start, end){
+    service.getTagHistoryBetween = function(id, start, end){
    	var deferred = $q.defer();
        var url = "/api/valuesbetween/" + id + "/" + start + "/" + end;
        console.log({url:url});
@@ -57,7 +49,7 @@ poconsole.factory('tags',function($q, $http, $log, dateConversion){
        return deferred.promise;
    };

-    var getCurrentValues = function(){
+    service.getCurrentValues = function(){
    	var deferred = $q.defer();
        $http.get('/api/latest').success(function(data) {
            data = data.map(makeDateinObject);
@@ -68,7 +60,7 @@ poconsole.factory('tags',function($q, $http, $log, dateConversion){
        return deferred.promise;
    };

-    var createTag = function(tag){
+    service.createTag = function(tag){
        $http.post('/api/tags', {
            tag: tag.tag,
            name: tag.name,
@@ -86,7 +78,7 @@ poconsole.factory('tags',function($q, $http, $log, dateConversion){
        });
    };

-    var updateTag = function(tag){
+    service.updateTag = function(tag){
        $log.info("updateTag called with "+ JSON.stringify(tag));
        var put_obj = {
            tag: tag.tag,
@@ -109,7 +101,7 @@ poconsole.factory('tags',function($q, $http, $log, dateConversion){
        });
    };

-    var deleteTag = function(id){
+    service.deleteTag = function(id){
        var deferred = $q.defer();
        var url = '/api/tags/' + id;
        $http.delete(url).success(function(data) {
@@ -120,7 +112,7 @@ poconsole.factory('tags',function($q, $http, $log, dateConversion){
        return deferred.promise;
    };

-    var clearSingleTagData = function(id){
+    service.clearSingleTagData = function(id){
        var deferred = $q.defer();
        var url = '/api/tag_vals';
        var filters = [{"name": "id", "op": "==", "val": "%" + id.toString() + "%"}];
@@ -134,7 +126,7 @@ poconsole.factory('tags',function($q, $http, $log, dateConversion){
        return deferred.promise;
    };

-    var clearAllTagData = function(){
+    service.clearAllTagData = function(){
        var deferred = $q.defer();
        var url = '/api/tag_vals';
        $http.delete(url).success(function(data) {
@@ -145,7 +137,7 @@ poconsole.factory('tags',function($q, $http, $log, dateConversion){
        return deferred.promise;
    };

-    var getTagsAtTime = function(dt){
+    service.getTagsAtTime = function(dt){
        var deferred = $q.defer();
        $http.get('/api/tagsattime/' + dt).success(function(data) {
            deferred.resolve(data);
@@ -153,18 +145,5 @@ poconsole.factory('tags',function($q, $http, $log, dateConversion){
        return deferred.promise;
    };

-    return {
-    	getTag: getTag,
-        getMultipleTags: getMultipleTags,
-    	getTagList: getTagList,
-        getDataTypes: getDataTypes,
-        getTagHistoryBetween: getTagHistoryBetween,
-    	getCurrentValues: getCurrentValues,
-        createTag: createTag,
-        updateTag: updateTag,
-        deleteTag: deleteTag,
-        clearSingleTagData: clearSingleTagData,
-        clearAllTagData: clearAllTagData,
-        getTagsAtTime: getTagsAtTime
-    };
+    return service;
 });
--- a/app/static/js/welltest.controller.js
+++ b/app/static/js/welltest.controller.js
@@ -14,22 +14,7 @@ poconsole.controller('wellTestCtrl', function($scope, Page, WellTest) {
            $scope.num_pages = d.total_pages;
            $scope.page_list = [];
            $scope.page_num = d.page;
-
-            if ($scope.page_num < $scope.num_pages){
-                $scope.page_num_next = $scope.page_num + 1;
-            } else {
-                $scope.page_num_next = $scope.num_pages;
-            }
-
-            if ($scope.page_num > 1){
-                $scope.page_num_prev = $scope.page_num - 1;
-            } else {
-                $scope.page_num_prev = 1;
-            }
-
-            for(var i = 1; i <= $scope.num_pages; i++){
-                $scope.page_list.push(i);
-            }
+            $scope.total = d.total;
        });
    };

--- a/app/static/js/welltest.factory.js
+++ b/app/static/js/welltest.factory.js
@@ -1,5 +1,6 @@
 poconsole.factory('WellTest',function($q, $http, $log){
-	var getWellTestPage = function(page_number) {
+	var service = {};
+	service.getWellTestPage = function(page_number) {
        var deferred = $q.defer();
        $http.get('/api/well_tests?q={"order_by":[{"field":"created_on","direction":"desc"}]}&page=' + page_number).success(function(data) {
        	deferred.resolve(data);
@@ -7,7 +8,7 @@ poconsole.factory('WellTest',function($q, $http, $log){
        return deferred.promise;
    };

-    var getWellTest = function(id){
+    service.getWellTest = function(id){
        var deferred = $q.defer();
        $http.get('/api/well_tests/' + id).success(function(data) {
        	deferred.resolve(data);
@@ -15,7 +16,7 @@ poconsole.factory('WellTest',function($q, $http, $log){
        return deferred.promise;
    };

-    var createWellTest = function(t){
+    service.createWellTest = function(t){
        var deferred = $q.defer();
        var well_test = {
            'duration_hours': t.duration_hours,
@@ -35,7 +36,7 @@ poconsole.factory('WellTest',function($q, $http, $log){
        return deferred.promise;
    };

-    var updateWellTest = function(t){
+    service.updateWellTest = function(t){
        var deferred = $q.defer();
        var well_test = {
            'duration_hours': t.duration_hours,
@@ -55,7 +56,7 @@ poconsole.factory('WellTest',function($q, $http, $log){
        return deferred.promise;
    };

-    var deleteWellTest = function(id){
+    service.deleteWellTest = function(id){
        var deferred = $q.defer();
        var url = '/api/well_tests/' + id;
        $http.delete(url).success(function(data) {
@@ -68,11 +69,5 @@ poconsole.factory('WellTest',function($q, $http, $log){



-    return {
-    	getWellTestPage: getWellTestPage,
-        getWellTest: getWellTest,
-        createWellTest: createWellTest,
-    	deleteWellTest: deleteWellTest,
-        updateWellTest: updateWellTest
-    };
+    return service;
 });
--- a/app/static/templates/cardlist.html
+++ b/app/static/templates/cardlist.html
@@ -10,19 +10,7 @@
 		</div>
 		<div class="col-sm-10">
 			<div style="text-align:center;">
-				<ul class="pagination">
-					<li>
-						<a ng-click="getDatePage(date_param, page_num_prev)" aria-label="Previous">
-							<span aria-hidden="true">&laquo;</span>
-						</a>
-					</li>
-					<li ng-repeat="p in page_list" ng-class="{'active':p==page_num}"><a ng-click="getDatePage(date_param, p)">{{p}}</a></li>
-					<li>
-						<a ng-click="getDatePage(date_param, page_num_next)" aria-label="Next">
-							<span aria-hidden="true">&raquo;</span>
-						</a>
-					</li>
-				</ul>
+				<dir-pagination-controls on-page-change="getDatePage(date_param, newPageNumber)" max-size="15"></dir-pagination-controls>
 			</div>

 			<div class="row">
@@ -44,7 +32,7 @@
 					</thead>

 					<tbody>
-						<tr ng-repeat="card in cards">
+						<tr dir-paginate="card in cards | itemsPerPage:per_page" total-items="total" current-page="page_num">
 							<td style="vertical-align: middle;text-align:center;"><input type="checkbox" ng-model="card.selected"></a></td>
 							<td style="vertical-align: middle;text-align:center;"><a href="/#/cards/{{card._id}}">{{card.created_on | date: "medium"}}</a></td>
 							<!-- <td style="vertical-align: middle;text-align:center;">{{card.Fillage_Percent | number: 2}} %</td> -->
--- a/app/static/templates/events.html
+++ b/app/static/templates/events.html
@@ -2,21 +2,7 @@
 	<div class="row">
 		<div class="col-md-12">
 			<h1>Event History</h1>
-			<div ng-if="num_pages>1" style="text-align:center;">
-				<ul class="pagination">
-					<li>
-						<a ng-click="loadEventPageData(page_num_prev)" aria-label="Previous">
-							<span aria-hidden="true">&laquo;</span>
-						</a>
-					</li>
-					<li ng-repeat="p in page_list" ng-class="{'active':p==page_num}"><a ng-click="loadEventPageData(p)">{{p}}</a></li>
-					<li>
-						<a ng-click="loadEventPageData(page_num_next)" aria-label="Next">
-							<span aria-hidden="true">&raquo;</span>
-						</a>
-					</li>
-				</ul>
-			</div>
+			<dir-pagination-controls on-page-change="loadEventPageData(newPageNumber)" max-size="15"></dir-pagination-controls>
 		</div>
 	</div>

@@ -33,7 +19,7 @@
 					</tr>
 				</thead>
 				<tbody>
-					<tr ng-repeat="e in event_data">
+					<tr dir-paginate="e in event_data | itemsPerPage:per_page" total-items="total" current-page="page_num">
 						<td nowrap>{{ e.created_on | date:'medium'}}</td>
 						<td nowrap>{{ e.event.name }}</td>
 						<td nowrap>{{ e.event_type }}</td>
--- a/app/static/templates/gaugeOff.html
+++ b/app/static/templates/gaugeOff.html
@@ -7,21 +7,7 @@

    <div class='row'>
    	<div class='col-md-12'>
-			<div ng-if="num_pages>1" style="text-align:center;">
-				<ul class="pagination">
-					<li>
-						<a ng-click="loadGaugeOffData(page_num_prev)" aria-label="Previous">
-							<span aria-hidden="true">&laquo;</span>
-						</a>
-					</li>
-					<li ng-repeat="p in page_list" ng-class="{'active':p==page_num}"><a ng-click="loadGaugeOffData(p)">{{p}}</a></li>
-					<li>
-						<a ng-click="loadGaugeOffData(page_num_next)" aria-label="Next">
-							<span aria-hidden="true">&raquo;</span>
-						</a>
-					</li>
-				</ul>
-			</div>
+			<dir-pagination-controls on-page-change="loadGaugeOffData(newPageNumber)" max-size="15"></dir-pagination-controls>
 			<div class="table-responsive">
 	    		<table class="table table-striped">
 	    			<thead>
@@ -43,7 +29,7 @@
 	                    </tr>
 	    			</thead>
 	    			<tbody>
-	                    <tr ng-repeat="entry in gauge_off_vals">
+	                    <tr dir-paginate="entry in gauge_off_vals | itemsPerPage:per_page" total-items="total" current-page="page_num">
 	    					<td nowrap>{{ entry.created_on | date: 'medium'}}</td>
 	                        <td nowrap>{{ entry.percent_run | number: 1 }} %</td>
 	                        <td nowrap>{{ entry.kWh_used_total | number: 2 }} kWh</td>
--- a/app/static/templates/notes.html
+++ b/app/static/templates/notes.html
@@ -94,21 +94,7 @@
 			<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#addModal">
 				New Note
 			</button>
-			<div ng-if="num_pages>1" style="text-align:center;">
-				<ul class="pagination">
-					<li>
-						<a ng-click="loadNotesPageData(page_num_prev)" aria-label="Previous">
-							<span aria-hidden="true">&laquo;</span>
-						</a>
-					</li>
-					<li ng-repeat="p in page_list" ng-class="{'active':p==page_num}"><a ng-click="loadNotesPageData(p)">{{p}}</a></li>
-					<li>
-						<a ng-click="loadNotesPageData(page_num_next)" aria-label="Next">
-							<span aria-hidden="true">&raquo;</span>
-						</a>
-					</li>
-				</ul>
-			</div>
+			<dir-pagination-controls on-page-change="loadNotesPageData(newPageNumber)" max-size="15"></dir-pagination-controls>
 		</div>
 	</div>

@@ -126,7 +112,7 @@
 					</tr>
 				</thead>
 				<tbody>
-					<tr ng-repeat="n in notes_data">
+					<tr dir-paginate="n in notes_data | itemsPerPage:per_page" total-items="total" current-page="page_num">
 						<td nowrap>{{ n.created_on | date:'medium'}}</td>
 						<td nowrap>{{ n.note_text }}</td>
 						<td nowrap>{{ n.author }}</td>
--- a/app/static/templates/tags.html
+++ b/app/static/templates/tags.html
@@ -26,13 +26,14 @@
                    </div>
                    <div class="form-group">
                        <label for="data_type">Data Type</label>
-                        <select ng-model="newTag.data_type_id" ng-options="t._id as t.data_type for t in data_types" class="form-control" id="data_type"></select>
+                        <select ng-model="newTag.data_type" ng-options="t for t in data_types" class="form-control" id="data_type"></select>
                    </div>
                    <div class="form-group">
-                        <label for="tag_type">Tag Type</label>
-                        <select ng-model="newTag.tag_class_id" class="form-control" id="tag_type">
-                          <option value=5>Normal</option>
-                          <option value=6>PLC Handshake</option>
+                        <label for="tag_category">Tag Type</label>
+                        <select ng-model="newTag.tag_category" class="form-control" id="tag_category">
+                            <option value="poc">POC</option>
+                            <option value="custom">Normal</option>
+                            <option value="handshake">PLC Handshake</option>
                        </select>
                    </div>
                    <div class="col-md-5">
@@ -104,13 +105,14 @@
                    </div>
                    <div class="form-group">
                        <label for="data_type">Data Type</label>
-                        <select ng-model="editTag.data_type_id" ng-options="t._id as t.data_type for t in data_types" class="form-control" id="data_type"></select>
+                        <select ng-model="editTag.data_type" ng-options="t for t in data_types" class="form-control" id="data_type"></select>
                    </div>
                    <div class="form-group">
-                        <label for="tag_type">Tag Type</label>
-                        <select ng-model="editTag.tag_class_id" class="form-control" id="tag_type">
-                          <option value=5>Normal</option>
-                          <option value=6>PLC Handshake</option>
+                        <label for="tag_category">Tag Type</label>
+                        <select ng-model="editTag.tag_category" class="form-control" id="tag_category">
+                            <option value="poc">POC</option>
+                            <option value="custom">Normal</option>
+                            <option value="handshake">PLC Handshake</option>
                        </select>
                    </div>
                    <div class="col-md-5">
@@ -197,68 +199,68 @@


 <div ng-if="loading" class="container">
-	<div class="row">
-		<div class="col-md-12 well" style="text-align:center;">
-			<h1>Loading Tags..</h1>
-			<img class="img-responsive" src="/images/loading.gif"  style="margin:0 auto;"/>
-		</div>
-	</div>
+    <div class="row">
+        <div class="col-md-12 well" style="text-align:center;">
+            <h1>Loading Tags..</h1>
+            <img class="img-responsive" src="/images/loading.gif"  style="margin:0 auto;"/>
+        </div>
+    </div>
 </div>

 <div ng-if="!loading">
-	<div ng-if="error" class="container">
-		<div class="row">
-			<div class="col-md=12">
-				<h1>Error Caught!</h1>
-				<pre>{{message}}</pre>
-			</div>
-		</div>
-	</div>
+    <div ng-if="error" class="container">
+        <div class="row">
+            <div class="col-md=12">
+                <h1>Error Caught!</h1>
+                <pre>{{message}}</pre>
+            </div>
+        </div>
+    </div>

-	<div ng-if="!error" class="container">
-		<div class="row">
-			<div class="col-md-12">
+    <div ng-if="!error" class="container">
+        <div class="row">
+            <div class="col-md-12">
                <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#addModal">
                    Add Tag
                </button>
-				<table class="table">
-					<thead>
-						<tr>
+                <table class="table">
+                    <thead>
+                        <tr>
                            <td></td>
-							<td>ID</td>
-							<td>Name</td>
-							<td>Min Expected Value</td>
-							<td>Max Expected Value</td>
-							<td>Units</td>
-							<td></td>
+                            <td>ID</td>
+                            <td>Name</td>
+                            <td>Min Expected Value</td>
+                            <td>Max Expected Value</td>
+                            <td>Units</td>
                            <td></td>
-							<td></td>
-						</tr>
-					</thead>
-					<tbody>
-						<tr ng-repeat="tag in tags">
+                            <td></td>
+                            <td></td>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr ng-repeat="tag in tags">
                            <td><input type="checkbox" ng-model="tag.selectedForPlot" ng-change="getPlotTags()"></input></td>
-							<td>{{tag._id}}</td>
-							<td><a href="/#/tag/{{tag._id}}">{{tag.name}}</a>  <i class="fa fa-info-circle" data-toggle="popover" title="{{tag.name}}" data-content="Tag Name: {{tag.tag}} </br>Details: {{tag.description}}<br/>Type: {{tag.data_type_id}}"></i></td>
-							<td>{{tag.min_expected}}</td>
-							<td>{{tag.max_expected}}</td>
-							<td>{{tag.units}}</td>
-							<td><button data-toggle="modal" data-target="#editModal" ng-click="openEditTag(tag._id)" class="btn btn-primary">Edit</button></td>
+                            <td>{{tag._id}}</td>
+                            <td><a href="/#/tag/{{tag._id}}">{{tag.name}}</a>  <i class="fa fa-info-circle" data-toggle="popover" title="{{tag.name}}" data-content="Tag Name: {{tag.tag}} </br>Details: {{tag.description}}<br/>Type: {{tag.data_type_id}}"></i></td>
+                            <td>{{tag.min_expected}}</td>
+                            <td>{{tag.max_expected}}</td>
+                            <td>{{tag.units}}</td>
+                            <td><button data-toggle="modal" data-target="#editModal" ng-click="openEditTag(tag._id)" class="btn btn-primary">Edit</button></td>
                            <td><button data-toggle="modal" data-target="#clearTagDataModal" ng-click="openClearTagData(tag._id)" class="btn btn-primary">Clear Data</button></td>
-							<td><button data-toggle="modal" data-target="#deleteModal" ng-click="openDeleteTag(tag._id)" class="btn btn-danger">Delete</button></td>
-							<script>
-								$(document).ready(function(){
-								    $('[data-toggle="popover"]').popover({html: true});
-								});
-							</script>
-						</tr>
-					</tbody>
-				</table>
+                            <td><button data-toggle="modal" data-target="#deleteModal" ng-click="openDeleteTag(tag._id)" class="btn btn-danger">Delete</button></td>
+                            <script>
+                            $(document).ready(function(){
+                                $('[data-toggle="popover"]').popover({html: true});
+                            });
+                            </script>
+                        </tr>
+                    </tbody>
+                </table>
                <div ng-if="tags.length==0" class="well" style="text-align:center">No tags yet.</div>
                <a ng-if="tags_to_plot" class="btn btn-success" href="/#/tag/{{tags_to_plot}}">
                    Compare Tags
                </a>
-			</div>
-		</div>
-	</div>
+            </div>
+        </div>
+    </div>
 </div>
--- a/app/static/templates/welltest.html
+++ b/app/static/templates/welltest.html
@@ -173,21 +173,7 @@
 			<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#addModal">
 				New Well Test
 			</button>
-			<div ng-if="num_pages>1" style="text-align:center;">
-				<ul class="pagination">
-					<li>
-						<a ng-click="loadWellTestData(page_num_prev)" aria-label="Previous">
-							<span aria-hidden="true">&laquo;</span>
-						</a>
-					</li>
-					<li ng-repeat="p in page_list" ng-class="{'active':p==page_num}"><a ng-click="loadWellTestData(p)">{{p}}</a></li>
-					<li>
-						<a ng-click="loadWellTestData(page_num_next)" aria-label="Next">
-							<span aria-hidden="true">&raquo;</span>
-						</a>
-					</li>
-				</ul>
-			</div>
+    		<dir-pagination-controls on-page-change="loadWellTestData(newPageNumber)" max-size="15"></dir-pagination-controls>
 			<div class="table-responsive">
 				<table class="table table-striped">
 					<thead>
@@ -208,7 +194,7 @@
 						</tr>
 					</thead>
 					<tbody>
-						<tr ng-repeat="test in well_test_vals">
+						<tr dir-paginate="test in well_test_vals | itemsPerPage:per_page" total-items="total" current-page="page_num">
 							<td nowrap>{{ test.created_on | date: 'medium' }}</td>
 							<td nowrap>{{ test.duration_hours }} Hours</td>
 							<td nowrap>{{ test.volume_oil_actual }} BBL</td>