diff --git a/web/gui/src/main/webapp/app/fw/widget/table.js b/web/gui/src/main/webapp/app/fw/widget/table.js
index d28fa0d..6477018 100644
--- a/web/gui/src/main/webapp/app/fw/widget/table.js
+++ b/web/gui/src/main/webapp/app/fw/widget/table.js
@@ -21,8 +21,12 @@
     'use strict';
 
     var $log, $window, fs, is,
+        div,
+        currCol = {},
+        prevCol = {},
         bottomMargin = 200;
 
+
     // Render a plain d3 table by giving it the div, a config file, and data
 
     function renderTable(div, config, data) {
@@ -106,6 +110,50 @@
         setTableHeight(th, tb);
     }
 
+    function updateSortingIcons(thElem, api) {
+        currCol.colId = thElem.attr('colId');
+
+        if (currCol.colId === prevCol.colId) {
+            (currCol.icon === 'tableColSortDesc') ?
+                currCol.icon = 'tableColSortAsc' :
+                currCol.icon = 'tableColSortDesc';
+            prevCol.icon = currCol.icon;
+        } else {
+            currCol.icon = 'tableColSortAsc';
+            prevCol.icon = 'tableColSortNone';
+        }
+
+        div = thElem.select('div');
+        div.remove();
+        div = thElem.append('div');
+
+        if (currCol.icon === 'tableColSortAsc') {
+            api.sortAsc(div);
+        } else {
+            api.sortDesc(div);
+        }
+
+        if (prevCol.colId !== undefined &&
+            prevCol.icon === 'tableColSortNone') {
+            api.sortNone(prevCol.elem.select('div'));
+        }
+
+        prevCol.colId = currCol.colId;
+        prevCol.elem = thElem;
+    }
+
+    function generateQueryParams() {
+        var queryString = '?sortCol=' + currCol.colId + '&sortDir=';
+
+        if(currCol.icon === 'tableColSortAsc') {
+            queryString = queryString + 'asc';
+        } else {
+            queryString = queryString + 'desc';
+        }
+
+        return queryString;
+    }
+
     angular.module('onosWidget')
         .factory('TableService', [function () {
             return {
@@ -158,66 +206,31 @@
 
         .directive('onosSortableHeader', ['$log', 'IconService',
             function (_$log_, _is_) {
-            return function (scope, element, attrs) {
-                $log = _$log_;
-                is = _is_;
-                var table = d3.select(element[0]),
-                    currCol = {},
-                    prevCol = {},
-                    sortIconAPI = is.createSortIcon();
+            return {
+                scope: {
+                    ctrlCallback: '&sortCallback'
+                },
+                link: function (scope, element, attrs) {
+                    $log = _$log_;
+                    is = _is_;
+                    var table = d3.select(element[0]),
+                        sortIconAPI = is.createSortIcon();
 
-                // when a header is clicked, change its icon tag and get sorting
-                // order to send to the server.
-                table.selectAll('th').on('click', function () {
-                    var thElem = d3.select(this),
-                        div;
+                    // when a header is clicked, change its icon tag
+                    // and get sorting order to send to the server.
+                    table.selectAll('th').on('click', function () {
+                        var thElem = d3.select(this);
 
-                    currCol.colId = thElem.attr('colId');
-
-                    if (currCol.colId === prevCol.colId) {
-                        (currCol.icon === 'tableColSortDesc') ?
-                            currCol.icon = 'tableColSortAsc' :
-                            currCol.icon = 'tableColSortDesc';
-                        prevCol.icon = currCol.icon;
-                    } else {
-                        currCol.icon = 'tableColSortAsc';
-                        prevCol.icon = 'tableColSortNone';
-                    }
-
-                    $log.debug('currCol clicked: ' + currCol.colId +
-                    ', with sorting icon: ' + currCol.icon);
-                    $log.debug('prevCol clicked: ' + prevCol.colId +
-                    ', with its current sorting icon as ' + prevCol.icon);
-
-                    div = thElem.select('div');
-                    div.remove();
-
-                    div = thElem.append('div');
-
-                    if (currCol.icon === 'tableColSortAsc') {
-                        sortIconAPI.sortAsc(div);
-                    } else {
-                        sortIconAPI.sortDesc(div);
-                    }
-
-                    if (prevCol.colId !== undefined &&
-                        prevCol.icon === 'tableColSortNone') {
-                        sortIconAPI.sortNone(prevCol.elem.select('div'));
-                    }
-
-                    prevCol.colId = currCol.colId;
-                    prevCol.elem = thElem;
-
-                });
-
-                // TODO: send the prev and currCol info to the server to use in sorting table
-
-                // TODO: figure out timing of events:
-                // updating the icon
-                // sending the column sorting info to the server
-                // refreshing the table so that the new rows will be sorted
-
-            }
+                        if (thElem.attr('sortable') === '') {
+                            updateSortingIcons(thElem, sortIconAPI);
+                            // call the ctrl's rest callback function
+                            scope.ctrlCallback({
+                                    urlSuffix: generateQueryParams()
+                                });
+                        }
+                    });
+                }
+            };
         }]);
 
 }());
diff --git a/web/gui/src/main/webapp/app/view/device/device.html b/web/gui/src/main/webapp/app/view/device/device.html
index f8a62a0..15cfac7 100644
--- a/web/gui/src/main/webapp/app/view/device/device.html
+++ b/web/gui/src/main/webapp/app/view/device/device.html
@@ -5,7 +5,7 @@
            onos-fixed-header
            ng-style="setTableHW()"
            onos-sortable-header
-           sort-callback="ctrl.sortCallback()">
+           sort-callback="sortCallback(urlSuffix)">
         <thead>
             <tr>
                 <th colId="available"></th>
diff --git a/web/gui/src/main/webapp/app/view/device/device.js b/web/gui/src/main/webapp/app/view/device/device.js
index 0d7779c..1f09ddb 100644
--- a/web/gui/src/main/webapp/app/view/device/device.js
+++ b/web/gui/src/main/webapp/app/view/device/device.js
@@ -22,8 +22,8 @@
     'use strict';
 
     angular.module('ovDevice', [])
-        .controller('OvDeviceCtrl', ['$log', '$location', 'RestService',
-        function ($log, $location, rs) {
+        .controller('OvDeviceCtrl', ['$log', '$scope', '$location', 'RestService',
+        function ($log, $scope, $location, rs) {
             var self = this;
             self.deviceData = [];
 
@@ -31,9 +31,17 @@
             var testCase = $location.search().test;
             var url = testCase ? 'test/' + testCase : 'device';
 
-            rs.get(url, function (data) {
-                self.deviceData = data.devices;
-            });
+            $scope.sortCallback = function (urlSuffix) {
+                if (!urlSuffix) {
+                    urlSuffix = '';
+                }
+                url = 'device' + urlSuffix;
+                rs.get(url, function (data) {
+                    self.deviceData = data.devices;
+                });
+            };
+
+            $scope.sortCallback();
 
             $log.log('OvDeviceCtrl has been created');
         }]);
diff --git a/web/gui/src/main/webapp/tests/app/fw/layer/flash-spec.js b/web/gui/src/main/webapp/tests/app/fw/layer/flash-spec.js
index d3a1d81..bbc3164 100644
--- a/web/gui/src/main/webapp/tests/app/fw/layer/flash-spec.js
+++ b/web/gui/src/main/webapp/tests/app/fw/layer/flash-spec.js
@@ -64,7 +64,7 @@
             text = item.select('text');
             expect(text.size()).toEqual(1);
             expect(text.text()).toEqual('foo');
-        }, 500);
+        }, 2000);
     });
 
     // TODO: testing these time-sensitive behaviors is hard...
diff --git a/web/gui/src/main/webapp/tests/app/view/device/device-spec.js b/web/gui/src/main/webapp/tests/app/view/device/device-spec.js
index 132f522..780cbc0 100644
--- a/web/gui/src/main/webapp/tests/app/view/device/device-spec.js
+++ b/web/gui/src/main/webapp/tests/app/view/device/device-spec.js
@@ -21,7 +21,7 @@
     // instantiate the Device module
     beforeEach(module('ovDevice', 'onosRemote'));
 
-    var $log, $controller, ctrl, $mockHttp;
+    var $log, $scope, $controller, ctrl, $mockHttp;
 
     var fakeData = {
         "devices": [{
@@ -40,17 +40,21 @@
         }]
     };
 
-    beforeEach(inject(function(_$log_, _$controller_, $httpBackend) {
+    beforeEach(inject(function(_$log_, $rootScope, _$controller_, $httpBackend) {
         $log = _$log_;
+        $scope = $rootScope.$new();
         $controller = _$controller_;
         $mockHttp = $httpBackend;
 
         $mockHttp.whenGET(/\/device$/).respond(fakeData);
     }));
 
-    it('should be an empty array', function () {
-        ctrl = $controller('OvDeviceCtrl');
+    it('should be an empty array and then have device data', function () {
+        ctrl = $controller('OvDeviceCtrl', {
+            $scope: $scope
+        });
         expect(ctrl.deviceData).toEqual([]);
+        $scope.sortCallback();
         $mockHttp.flush();
         expect(ctrl.deviceData).toEqual(fakeData.devices);
     });