diff --git a/awx/ui/static/js/controllers/Inventories.js b/awx/ui/static/js/controllers/Inventories.js
index 864907dd7b..f091acc66f 100644
--- a/awx/ui/static/js/controllers/Inventories.js
+++ b/awx/ui/static/js/controllers/Inventories.js
@@ -531,7 +531,7 @@ function InventoriesEdit($scope, $location, $routeParams, $compile, $log, $rootS
     }
     $scope.removeGroupTreeLoaded = $scope.$on('GroupTreeLoaded', function (event, inventory_name, groups) {
         // Add breadcrumbs
-        var e, inventoryAutoHelp;
+        var e, html, inventoryAutoHelp;
         e = angular.element(document.getElementById('breadcrumbs'));
         e.html(Breadcrumbs({ list: list, mode: 'edit' }));
         $compile(e)($scope);
@@ -541,8 +541,14 @@ function InventoriesEdit($scope, $location, $routeParams, $compile, $log, $rootS
             mode: 'edit',
             id: 'groups-container',
             breadCrumbs: false,
-            searchSize: 'col-lg-5 col-md-5 col-sm-5'
+            searchSize: 'col-lg-5 col-md-5 col-sm-5',
+            skipTableHead: true
         });
+
+        // Keep the table header fixed while allowing the table body to scroll and still use <table> element
+        html = "<table class=\"table table-condensed\" id=\"groups-table-header\">" + generator.buildHeader() + "</table>\n";
+        $(html).insertBefore('#groups-container .list-table-container');
+
         $scope.groups = groups;
         $scope.inventory_name = inventory_name;
 
@@ -595,7 +601,6 @@ function InventoriesEdit($scope, $location, $routeParams, $compile, $log, $rootS
 
     });
 
-
     // Called after tree data is reloaded on refresh button click.
     if ($scope.removeGroupTreeRefreshed) {
         $scope.removeGroupTreeRefreshed();
diff --git a/awx/ui/static/js/helpers/inventory.js b/awx/ui/static/js/helpers/inventory.js
index e51ea97126..4ccee9528a 100644
--- a/awx/ui/static/js/helpers/inventory.js
+++ b/awx/ui/static/js/helpers/inventory.js
@@ -18,23 +18,36 @@ angular.module('InventoryHelper', ['RestServices', 'Utilities', 'OrganizationLis
     function (ApplyEllipsis) {
         return function () {
             // Call to set or restore window resize
-            var timeOut;
-            $(window).resize(function () {
-                clearTimeout(timeOut);
-                timeOut = setTimeout(function () {
-                    // Hack to stop group-name div slipping to a new line
-                    $('#groups_table .name-column').each(function () {
-                        var td_width = $(this).width(),
-                            level_width = $(this).find('.level').width(),
-                            level_padding = parseInt($(this).find('.level').css('padding-left').replace(/px/, '')),
-                            level = level_width + level_padding,
-                            pct = (100 - Math.ceil((level / td_width) * 100)) + '%';
-                        $(this).find('.group-name').css({ width: pct });
-                    });
-                    ApplyEllipsis('#groups_table .group-name a');
-                    ApplyEllipsis('#hosts_table .host-name a');
-                }, 100);
-            });
+
+            function setGroupsHeight() {
+                // Attempt to set the group height
+                var height;
+                if ($(window).width() > 1210) {
+                    height = $(window).height() - $('.main-menu').outerHeight() - $('#main_tabs').outerHeight() - $('#breadcrumbs').outerHeight() -
+                        ($('.site-footer').outerHeight() * 2) - $('#groups-container .list-actions').outerHeight() - $('#groups-table-header').height() - 20;
+                    $('#groups-container .list-table-container').height(height);
+                }
+                else {
+                    $('#groups-container .list-table-container').height('auto');
+                }
+            }
+
+            setGroupsHeight();
+
+            $(window).resize(_.debounce(function() {
+                // Hack to stop group-name div slipping to a new line
+                $('#groups_table .name-column').each(function () {
+                    var td_width = $(this).width(),
+                        level_width = $(this).find('.level').width(),
+                        level_padding = parseInt($(this).find('.level').css('padding-left').replace(/px/, '')),
+                        level = level_width + level_padding,
+                        pct = (100 - Math.ceil((level / td_width) * 100)) + '%';
+                    $(this).find('.group-name').css({ width: pct });
+                });
+                ApplyEllipsis('#groups_table .group-name a');
+                ApplyEllipsis('#hosts_table .host-name a');
+                setGroupsHeight();
+            }, 500));
         };
     }
 ])
@@ -53,10 +66,10 @@ angular.module('InventoryHelper', ['RestServices', 'Utilities', 'OrganizationLis
                 fld, json_data, data;
 
             Wait('start');
-            
+
             // Make sure we have valid variable data
             json_data = ToJSON(scope.inventoryParseType, scope.inventory_variables);
-        
+
             data = {};
             for (fld in form.fields) {
                 if (fld !== 'inventory_variables') {
@@ -178,7 +191,7 @@ angular.module('InventoryHelper', ['RestServices', 'Utilities', 'OrganizationLis
             }
             scope.removeInventorySaved = scope.$on('InventorySaved', function () {
                 $('#form-modal').modal('hide');
-                // Restore prior search state           
+                // Restore prior search state
                 if (scope.searchCleanp) {
                     scope.searchCleanup();
                 }
diff --git a/awx/ui/static/js/lists/InventoryGroups.js b/awx/ui/static/js/lists/InventoryGroups.js
index 67f8f12033..83ecb59227 100644
--- a/awx/ui/static/js/lists/InventoryGroups.js
+++ b/awx/ui/static/js/lists/InventoryGroups.js
@@ -1,8 +1,8 @@
 /*********************************************
  *  Copyright (c) 2014 AnsibleWorks, Inc.
  *
- *  InventoryGroups.js 
- * 
+ *  InventoryGroups.js
+ *
  */
 angular.module('InventoryGroupsDefinition', [])
     .value('InventoryGroups', {
@@ -16,8 +16,8 @@ angular.module('InventoryGroupsDefinition', [])
         hover: false,
         hasChildren: true,
         filterBy: '{ show: true }',
-        'class': 'table-condensed table-no-border',
-        
+        'class': 'table-no-border',
+
         fields: {
             name: {
                 label: 'Groups',
@@ -26,7 +26,7 @@ angular.module('InventoryGroupsDefinition', [])
                 columnClick: "showHosts(group.id,group.group_id, false)",
                 ngClass: "group.selected_class",
                 hasChildren: true,
-                columnClass: 'col-lg-10 col-md-10 col-sm-10 col-xs-8',
+                columnClass: 'col-lg-10 col-md-10 col-sm-10 col-xs-9',
                 nosort: true,
                 awDroppable: "{{ group.isDroppable }}",
                 awDraggable: "{{ group.isDraggable }}",
@@ -37,7 +37,7 @@ angular.module('InventoryGroupsDefinition', [])
             }
         },
 
-        actions: {        
+        actions: {
             create: {
                 mode: 'all',
                 ngClick: "createGroup()",
@@ -62,8 +62,8 @@ angular.module('InventoryGroupsDefinition', [])
         },
 
         fieldActions: {
-            
-            columnClass: 'col-lg-2 col-md-2 col-sm-2 col-xs-4',
+
+            columnClass: 'col-lg-2 col-md-2 col-sm-2 col-xs-3',
 
             sync_status: {
                 mode: 'all',
@@ -120,4 +120,4 @@ angular.module('InventoryGroupsDefinition', [])
             }
         }
     });
-            
+
diff --git a/awx/ui/static/js/lists/InventoryHosts.js b/awx/ui/static/js/lists/InventoryHosts.js
index 0ba5545936..664efa2160 100644
--- a/awx/ui/static/js/lists/InventoryHosts.js
+++ b/awx/ui/static/js/lists/InventoryHosts.js
@@ -28,7 +28,7 @@ angular.module('InventoryHostsDefinition', [])
                 label: 'Hosts',
                 ngClick: "editHost(host.id)",
                 searchPlaceholder: "search_place_holder",
-                columnClass: 'col-lg-10 col-md-10 col-sm-10 col-xs-8',
+                columnClass: 'col-lg-10 col-md-10 col-sm-10 col-xs-9',
                 dataHostId: "{{ host.id }}",
                 dataType: "host",
                 awDraggable: "true"
@@ -51,7 +51,7 @@ angular.module('InventoryHostsDefinition', [])
 
         fieldActions: {
             
-            columnClass: 'col-lg-2 col-md-2 col-sm-2 col-xs-4',
+            columnClass: 'col-lg-2 col-md-2 col-sm-2 col-xs-3',
 
             enabled_flag: {
                 iconClass: "{{ 'fa icon-enabled-' + host.enabled }}",
diff --git a/awx/ui/static/less/ansible-ui.less b/awx/ui/static/less/ansible-ui.less
index 8188277540..d585910eed 100644
--- a/awx/ui/static/less/ansible-ui.less
+++ b/awx/ui/static/less/ansible-ui.less
@@ -389,7 +389,7 @@ dd {
       content: "";
       display: block;
   }
-  
+
   #wrap:after {
       height: @push-height;
   }
@@ -953,7 +953,7 @@ input[type="checkbox"].checkbox-no-label {
   border-top: none;
 }
 
-/* Less padding on .table-condensed */ 
+/* Less padding on .table-condensed */
 .table-condensed>tbody>tr>td,
 .table-condensed>thead>tr>th {
     padding-top: 3px;
@@ -1077,7 +1077,7 @@ input[type="checkbox"].checkbox-no-label {
   }
   .icon-socket-error:before {
       content: "\f111";
-      color: @red;  
+      color: @red;
   }
   .icon-socket-connecting:before {
       content: "\f042";
@@ -1091,7 +1091,7 @@ input[type="checkbox"].checkbox-no-label {
     line-height: 1;
   }
 
-/* job_events page */ 
+/* job_events page */
 
   #jobevents_table {
       div.return-code {
@@ -1324,6 +1324,16 @@ input[type="checkbox"].checkbox-no-label {
       margin-bottom: 0;
   }
 
+  #groups-table-header {
+      margin-bottom: 0;
+  }
+
+  #groups-container {
+      .list-table-container {
+          overflow: auto;
+      }
+  }
+
   #inventories_table i[class*="icon-job-"],
   #home_groups_table i[class*="icon-job-"] {
       margin-left: 10px;
@@ -1664,18 +1674,6 @@ tr td button i {
 
 }
 
-/* Portrait tablet to landscape and desktop */
-
-/*@media (max-width: 1200px) {
-    .site-footer {
-        .logo {
-            text-align: center;
-            padding-top: 20px;
-            margin-bottom: 10px;
-        }
-    }
-}*/
-
 @media (min-width: 768px) and (max-width: 1199px) {
 
   .level-1,
@@ -1709,6 +1707,7 @@ tr td button i {
   }
 
   #hosts-container.col-lg-6 {
+      margin-top: 15px;
       padding-left: 15px;
       padding-right: 15px;
       .well {
@@ -1722,7 +1721,7 @@ tr td button i {
 /* Landscape phone to portrait tablet */
 
 @media (max-width: 767px) {
-  
+
   /* The sticky footer: http://css-tricks.com/snippets/css/sticky-footer, with less variables */
   @footer-height: 140px;
   @footer-margin: 15px;
@@ -1804,6 +1803,7 @@ tr td button i {
   }
 
   #hosts-container.col-lg-6 {
+      margin-toop: 15px;
       padding-left: 15px;
       padding-right: 15px;
   }
diff --git a/awx/ui/static/lib/ansible/list-generator.js b/awx/ui/static/lib/ansible/list-generator.js
index 7af7ee32c0..5e1e000193 100644
--- a/awx/ui/static/lib/ansible/list-generator.js
+++ b/awx/ui/static/lib/ansible/list-generator.js
@@ -12,456 +12,475 @@
 angular.module('ListGenerator', ['GeneratorHelpers'])
     .factory('GenerateList', ['$location', '$compile', '$rootScope', 'SearchWidget', 'PaginateWidget', 'Attr', 'Icon',
         'Column', 'DropDown', 'NavigationLink', 'Button', 'SelectIcon', 'Breadcrumbs',
-        function ($location, $compile, $rootScope, SearchWidget, PaginateWidget, Attr, Icon, Column, DropDown, NavigationLink, Button, SelectIcon,
-            Breadcrumbs) {
-            return {
+    function ($location, $compile, $rootScope, SearchWidget, PaginateWidget, Attr, Icon, Column, DropDown, NavigationLink,
+        Button, SelectIcon, Breadcrumbs) {
+        return {
 
-                setList: function (list) {
-                    this.list = list;
-                },
+            setList: function (list) {
+                this.list = list;
+            },
 
-                attr: Attr,
+            setOptions: function(options) {
+                this.options = options;
+            },
 
-                icon: Icon,
+            attr: Attr,
 
-                has: function (key) {
-                    return (this.form[key] && this.form[key] !== null && this.form[key] !== undefined) ? true : false;
-                },
+            icon: Icon,
 
-                hide: function () {
-                    $('#lookup-modal').modal('hide');
-                },
+            has: function (key) {
+                return (this.form[key] && this.form[key] !== null && this.form[key] !== undefined) ? true : false;
+            },
 
-                button: Button,
+            hide: function () {
+                $('#lookup-modal').modal('hide');
+            },
 
-                buildHTML: function(list, options) {
-                    this.setList(list);
-                    return this.build(options);
-                },
+            button: Button,
 
-                inject: function (list, options) {
-                    // options.mode = one of edit, select or lookup
-                    //
-                    // Modes edit and select will inject the list as html into element #htmlTemplate.
-                    // 'lookup' mode injects the list html into #lookup-modal-body.
-                    //
-                    // For options.mode == 'lookup', include the following:
-                    //
-                    //     hdr: <lookup dialog header>
-                    //
-                    // Inject into a custom element using options.id: <element id attribute value>
-                    // Control breadcrumb creation with options.breadCrumbs: <true | false>
-                    //
-                    var element;
+            buildHTML: function(list, options) {
+                this.setList(list);
+                return this.build(options);
+            },
 
-                    if (options.id) {
-                        element = angular.element(document.getElementById(options.id));
-                    } else {
-                        element = angular.element(document.getElementById('htmlTemplate'));
-                    }
-                    
-                    this.setList(list);
-                    element.html(this.build(options)); // Inject the html
-                    
-                    if (options.prepend) {
-                        element.prepend(options.prepend);
-                    }
-                    
-                    if (options.append) {
-                        element.append(options.append);
-                    }
+            inject: function (list, options) {
+                // options.mode = one of edit, select or lookup
+                //
+                // Modes edit and select will inject the list as html into element #htmlTemplate.
+                // 'lookup' mode injects the list html into #lookup-modal-body.
+                //
+                // For options.mode == 'lookup', include the following:
+                //
+                //     hdr: <lookup dialog header>
+                //
+                // Inject into a custom element using options.id: <element id attribute value>
+                // Control breadcrumb creation with options.breadCrumbs: <true | false>
+                //
+                var element;
 
-                    if (options.scope) {
-                        this.scope = options.scope;
-                    } else {
-                        this.scope = element.scope();
-                    }
-
-                    $compile(element)(this.scope);
-
-                    // Reset the scope to prevent displaying old data from our last visit to this list 
-                    //this.scope[list.name] = null;
-                    this.scope[list.iterator] = [];
-                    
-                    // Remove any lingering tooltip and popover <div> elements
-                    $('.tooltip').each(function() {
-                        $(this).remove();
-                    });
-
-                    $('.popover').each(function() {
-                        // remove lingering popover <div>. Seems to be a bug in TB3 RC1
-                        $(this).remove();
-                    });
-                    $(window).unbind('resize');
-
-                    try {
-                        $('#help-modal').empty().dialog('destroy');
-                    } catch (e) {
-                        //ignore any errors should the dialog not be initialized 
-                    }
-
-                    /*if (options.mode === 'lookup') {
-                        // options should include {hdr: <dialog header>, action: <function...> }
-                        this.scope.formModalActionDisabled = false;
-                        this.scope.lookupHeader = options.hdr;
-                        $('#lookup-modal').modal({
-                            backdrop: 'static',
-                            keyboard: true
-                        });
-                        $('#lookup-modal').unbind('hidden.bs.modal');
-                        $(document).bind('keydown', function (e) {
-                            if (e.keyCode === 27) {
-                                $('#lookup-modal').modal('hide');
-                            }
-                        });
-                    }*/
-
-                    return this.scope;
-                },
-
-                build: function (options) {
-                    //
-                    // Generate HTML. Do NOT call this function directly. Called by inject(). Returns an HTML 
-                    // string to be injected into the current view. 
-                    //
-                    var html = '',
-                        list = this.list,
-                        base, size, action, btn, fld, cnt, field_action, fAction, itm;
-
-                    if (options.activityStream) {
-                        // Breadcrumbs for activity stream widget
-                        // Make the links clickable using ng-click function so we can first remove the stream widget
-                        // before navigation
-                        html += "<div class=\"nav-path\">\n";
-                        html += "<ul class=\"breadcrumb\">\n";
-                        html += "<li ng-repeat=\"crumb in breadcrumbs\"><a href=\"\" " + "ng-click=\"closeStream(crumb.path)\">" +
-                            "{{ crumb.title }}</a></li>\n";
-                        html += "<li class=\"active\">";
-                        html += list.editTitle;
-                        html += "</li>\n</ul>\n</div>\n";
-                    } else if (options.mode !== 'lookup' && (options.breadCrumbs === undefined || options.breadCrumbs)) {
-                        //Breadcrumbs
-                        html += Breadcrumbs({
-                            list: list,
-                            mode: options.mode
-                        });
-                    }
-
-                    if (options.mode === 'edit' && list.editInstructions) {
-                        html += "<div class=\"alert alert-info alert-block\">\n";
-                        html += "<button type=\"button\" class=\"close\" data-dismiss=\"alert\">&times;</button>\n";
-                        html += "<strong>Hint: </strong>" + list.editInstructions + "\n";
-                        html += "</div>\n";
-                    }
-
-                    if (options.instructions) {
-                        html += "<div class=\"instructions alert alert-info\">" + options.instructions + "</div>\n";
-                    }
-                    else if (list.instructions) {
-                        html += "<div class=\"instructions alert alert-info\">" + list.instructions + "</div>\n";
-                    }
-
-                    if (options.mode !== 'lookup' && (list.well === undefined || list.well)) {
-                        html += "<div class=\"well\">\n";
-                    }
-
-                    if (options.activityStream) {
-                        // Add a title row
-                        html += "<div class=\"row\">\n";
-                        html += "<div class=\"col-lg-12\">\n";
-                        html += "<h5>{{ streamTitle }}</h5>\n";
-                        html += "</div>\n";
-                        html += "</div>\n";
-                    }
-                    
-                    if (options.showSearch=== undefined || options.showSearch === true) {
-                        html += "<div class=\"row\">\n";
-                        if (list.name !== 'groups') {
-                            if (options.searchSize) {
-                                html += SearchWidget({
-                                    iterator: list.iterator,
-                                    template: list,
-                                    mini: true,
-                                    size: options.searchSize,
-                                    searchWidgets: list.searchWidgets
-                                });
-                            } else if (options.mode === 'summary') {
-                                html += SearchWidget({
-                                    iterator: list.iterator,
-                                    template: list,
-                                    mini: true,
-                                    size: 'col-lg-6'
-                                });
-                            } else if (options.mode === 'lookup' || options.id !== undefined) {
-                                html += SearchWidget({
-                                    iterator: list.iterator,
-                                    template: list,
-                                    mini: true,
-                                    size: 'col-lg-8'
-                                });
-                            } else {
-                                html += SearchWidget({
-                                    iterator: list.iterator,
-                                    template: list,
-                                    mini: true
-                                });
-                            }
-                        }
-
-                        if (options.mode !== 'lookup') {
-                            //actions
-                            base = $location.path().replace(/^\//, '').split('/')[0];
-                            html += "<div class=\"";
-                            if (list.name === 'groups') {
-                                html += "col-lg-12";
-                            } else if (options.searchSize && !options.listSize) {
-                                // User supplied searchSize, calc the remaining
-                                size = parseInt(options.searchSize.replace(/([A-Z]|[a-z]|\-)/g, ''));
-                                size = (list.searchWidgets) ? list.searchWidgets * size : size;
-                                html += 'col-lg-' + (12 - size);
-                            } else if (options.listSize) {
-                                html += options.listSize;
-                            } else if (options.mode === 'summary') {
-                                html += 'col-lg-6';
-                            } else if (options.id !== undefined) {
-                                html += "col-lg-4";
-                            } else {
-                                html += "col-lg-8 col-md-6";
-                            }
-                            html += "\">\n";
-
-                            html += "<div class=\"list-actions\">\n";
-
-                            // Add toolbar buttons or 'actions'
-                            for (action in list.actions) {
-                                if (list.actions[action].mode === 'all' || list.actions[action].mode === options.mode) {
-                                    if ((list.actions[action].basePaths === undefined) ||
-                                        (list.actions[action].basePaths && list.actions[action].basePaths.indexOf(base) > -1)) {
-                                        html += this.button({
-                                            btn: list.actions[action],
-                                            action: action,
-                                            toolbar: true
-                                        });
-                                    }
-                                }
-                            }
-
-                            //select instructions
-                            if (options.mode === 'select' && list.selectInstructions) {
-                                btn = {
-                                    awPopOver: list.selectInstructions,
-                                    dataPlacement: 'left',
-                                    dataContainer: 'body',
-                                    'class': 'btn-xs btn-help',
-                                    awToolTip: 'Click for help',
-                                    dataTitle: 'Help',
-                                    iconSize: 'fa-lg'
-                                };
-                                //html += this.button(btn, 'select');
-                                html += this.button({
-                                    btn: btn,
-                                    action: 'help',
-                                    toolbar: true
-                                });
-                            }
-
-                            html += "</div><!-- list-acitons -->\n";
-                            html += "</div><!-- list-actions-column -->\n";
-                        } else {
-                            //lookup
-                            html += "<div class=\"col-lg-7\"></div>\n";
-                        }
-                        html += "</div><!-- row -->\n";
-                    }
-
-                    // Add a title and optionally a close button (used on Inventory->Groups)
-                    if (options.mode !== 'lookup' && list.showTitle) {
-                        html += "<div class=\"form-title\">";
-                        html += (options.mode === 'edit' || options.mode === 'summary') ? list.editTitle : list.addTitle;
-                        html += "</div>\n";
-                    }
-                    
-                    // table header row
-                    html += "<div class=\"list-table-container\">\n";
-                    html += "<table id=\"" + list.name + "_table\" ";
-                    html += "class=\"table table-condensed";
-                    html += (list['class']) ? " " + list['class'] : "";
-                    html += (options.mode !== 'summary' && options.mode !== 'edit' && (options.mode === 'lookup' || options.id)) ?
-                        ' table-hover-inverse' : '';
-                    html += (list.hover) ? ' table-hover' : '';
-                    html += (options.mode === 'summary') ? ' table-summary' : '';
-                    html += "\" ";
-                    html += ">\n";
-                    html += "<thead>\n";
-                    html += "<tr>\n";
-                    if (list.index) {
-                        html += "<th class=\"col-lg-1 col-md-1 col-sm-2 hidden-xs\">#</th>\n";
-                    }
-                    for (fld in list.fields) {
-                        if ((list.fields[fld].searchOnly === undefined || list.fields[fld].searchOnly === false) &&
-                            !(options.mode === 'lookup' && list.fields[fld].excludeModal !== undefined && list.fields[fld].excludeModal === true)) {
-                            html += "<th class=\"list-header";
-                            html += (list.fields[fld].columnClass) ? " " + list.fields[fld].columnClass : "";
-                            html += "\" id=\"" + list.iterator + "-" + fld + "-header\"";
-                            html += (list.fields[fld].columnShow) ? " ng-show=\"" + list.fields[fld].columnShow + "\" " : "";
-                            html += (list.fields[fld].nosort === undefined || list.fields[fld].nosort !== true) ? " ng-click=\"sort('" + list.iterator + "','" + fld + "')\"" : "";
-                            html += ">";
-                            html += list.fields[fld].label;
-                            if (list.fields[fld].nosort === undefined || list.fields[fld].nosort !== true) {
-                                html += " <i class=\"fa ";
-                                if (list.fields[fld].key) {
-                                    if (list.fields[fld].desc) {
-                                        html += "fa-sort-down";
-                                    } else {
-                                        html += "fa-sort-up";
-                                    }
-                                } else {
-                                    html += "fa-sort";
-                                }
-                                html += "\"></i></a>";
-                            }
-                            html += "</th>\n";
-                        }
-                    }
-                    if (options.mode === 'select' || options.mode === 'lookup') {
-                        html += "<th>Select</th>";
-                    } else if (options.mode === 'edit' && list.fieldActions) {
-                        html += "<th class=\"actions-column";
-                        html += (list.fieldActions && list.fieldActions.columnClass) ? " " + list.fieldActions.columnClass : "";
-                        html += "\">Actions</th>\n";
-                    }
-                    html += "</tr>\n";
-                    html += "</thead>\n";
-
-                    // table body
-                    html += "<tbody>\n";
-                    html += "<tr ng-class=\"" + list.iterator;
-                    html += (options.mode === 'lookup' || options.mode === 'select') ? ".success_class" : ".active_class";
-                    html += "\" ";
-                    html += "class=\"" + list.iterator + "_class\" ";
-                    html += "ng-repeat=\"" + list.iterator + " in " + list.name;
-                    html += (list.orderBy) ? " | orderBy:'" + list.orderBy + "'" : "";
-                    html += (list.filterBy) ? " | filter: " + list.filterBy : "";
-                    html += "\">\n";
-                    if (list.index) {
-                        html += "<td class=\"index-column hidden-xs\">{{ $index + ((" + list.iterator + "_page - 1) * " + list.iterator + "_page_size) + 1 }}.</td>\n";
-                    }
-                    cnt = 2;
-                    base = (list.base) ? list.base : list.name;
-                    base = base.replace(/^\//, '');
-                    for (fld in list.fields) {
-                        cnt++;
-                        if ((list.fields[fld].searchOnly === undefined || list.fields[fld].searchOnly === false) &&
-                            !(options.mode === 'lookup' && list.fields[fld].excludeModal !== undefined &&
-                            list.fields[fld].excludeModal === true)) {
-                            html += Column({
-                                list: list,
-                                fld: fld,
-                                options: options,
-                                base: base
-                            });
-                        }
-                    }
-
-                    if (options.mode === 'select' || options.mode === 'lookup') {
-                        html += "<td><input type=\"checkbox\" ng-model=\"" + list.iterator + ".checked\" name=\"check_{{" +
-                            list.iterator + ".id }}\" ng-click=\"toggle_" + list.iterator + "(" + list.iterator + ".id, true)\" ng-true-value=\"1\" " +
-                            "ng-false-value=\"0\" id=\"check_{{" + list.iterator + ".id}}\" /></td>";
-                    } else if ((options.mode === 'edit' || options.mode === 'summary') && list.fieldActions) {
-
-                        // Row level actions
-
-                        html += "<td class=\"actions\">";
-
-                        for (field_action in list.fieldActions) {
-                            if (field_action !== 'columnClass') {
-                                if (list.fieldActions[field_action].type && list.fieldActions[field_action].type === 'DropDown') {
-                                    html += DropDown({
-                                        list: list,
-                                        fld: field_action,
-                                        options: options,
-                                        base: base,
-                                        type: 'fieldActions',
-                                        td: false
-                                    });
-                                } else {
-                                    fAction = list.fieldActions[field_action];
-                                    html += "<a id=\"";
-                                    html += (fAction.id) ? fAction.id : field_action + "-action";
-                                    html += "\" ";
-                                    html += (fAction.href) ? "href=\"" + fAction.href + "\" " : "";
-                                    html += (fAction.ngHref) ? "ng-href=\"" + fAction.ngHref + "\" " : "";
-                                    html += (field_action === 'cancel') ? "class=\"cancel red-txt\" " : "";
-                                    html += (fAction.awPopOver) ? "aw-pop-over=\"" + fAction.awPopOver + "\" " : "";
-                                    html += (fAction.dataPlacement) ? Attr(fAction, 'dataPlacement') : "";
-                                    html += (fAction.dataTitle) ? Attr(fAction, 'dataTitle') : "";
-                                    for (itm in fAction) {
-                                        if (itm !== 'ngHref' && itm !== 'href' && itm !== 'label' && itm !== 'icon' && itm !== 'class' &&
-                                            itm !== 'iconClass' && itm !== "dataPlacement" && itm !== "awPopOver" &&
-                                            itm !== "dataTitle") {
-                                            html += Attr(fAction, itm);
-                                        }
-                                    }
-                                    html += ">";
-                                    if (fAction.iconClass) {
-                                        html += "<i class=\"" + fAction.iconClass + "\"></i>";
-                                    } else {
-                                        html += SelectIcon({
-                                            action: field_action
-                                        });
-                                    }
-                                    //html += (fAction.label) ? "<span class=\"list-action-label\"> " + list.fieldActions[field_action].label +
-                                    //    "</span>" : "";
-                                    html += "</a>";
-                                }
-                            }
-                        }
-                        html += "</td>\n";
-                    }
-                    html += "</tr>\n";
-
-                    // Message for when a collection is empty
-                    html += "<tr class=\"loading-info\" ng-show=\"" + list.iterator + "Loading == false && " + list.name + ".length == 0\">\n";
-                    html += "<td colspan=\"" + cnt + "\"><div class=\"loading-info\">No records matched your search.</div></td>\n";
-                    html += "</tr>\n";
-
-                    // Message for loading
-                    html += "<tr class=\"loading-info\" ng-show=\"" + list.iterator + "Loading == true\">\n";
-                    html += "<td colspan=\"" + cnt + "\"><div class=\"loading-info\">Loading...</div></td>\n";
-                    html += "</tr>\n";
-
-                    // End List
-                    html += "</tbody>\n";
-                    html += "</table>\n";
-                    html += "</div><!-- table container -->\n";
-
-                    if (options.mode === 'select' && (options.selectButton === undefined || options.selectButton)) {
-                        html += "<div class=\"navigation-buttons\">\n";
-                        html += " <button class=\"btn btn-sm btn-primary pull-right\" aw-tool-tip=\"Complete your selection\" " +
-                            "ng-click=\"finishSelection()\" ng-disabled=\"disableSelectBtn\"><i class=\"fa fa-check\"></i> Select</button>\n";
-                        html += "</div>\n";
-                    }
-
-                    if (options.mode !== 'lookup' && (list.well === undefined || list.well === true)) {
-                        html += "</div>\n"; //well
-                    }
-
-                    if (list.name !== 'groups') {
-                        if (options.mode === 'lookup' || (options.id && options.id === "form-modal-body")) {
-                            html += PaginateWidget({
-                                set: list.name,
-                                iterator: list.iterator
-                            });
-                        } else {
-                            html += PaginateWidget({
-                                set: list.name,
-                                iterator: list.iterator
-                            });
-                        }
-                    }
-
-                    return html;
+                if (options.id) {
+                    element = angular.element(document.getElementById(options.id));
+                } else {
+                    element = angular.element(document.getElementById('htmlTemplate'));
                 }
-            };
-        }
-    ]);
\ No newline at end of file
+                
+                this.setOptions(options);
+                this.setList(list);
+                element.html(this.build(options)); // Inject the html
+                
+                if (options.prepend) {
+                    element.prepend(options.prepend);
+                }
+                
+                if (options.append) {
+                    element.append(options.append);
+                }
+
+                if (options.scope) {
+                    this.scope = options.scope;
+                } else {
+                    this.scope = element.scope();
+                }
+
+                $compile(element)(this.scope);
+
+                // Reset the scope to prevent displaying old data from our last visit to this list 
+                //this.scope[list.name] = null;
+                this.scope[list.iterator] = [];
+                
+                // Remove any lingering tooltip and popover <div> elements
+                $('.tooltip').each(function() {
+                    $(this).remove();
+                });
+
+                $('.popover').each(function() {
+                    // remove lingering popover <div>. Seems to be a bug in TB3 RC1
+                    $(this).remove();
+                });
+                $(window).unbind('resize');
+
+                try {
+                    $('#help-modal').empty().dialog('destroy');
+                } catch (e) {
+                    //ignore any errors should the dialog not be initialized 
+                }
+
+                /*if (options.mode === 'lookup') {
+                    // options should include {hdr: <dialog header>, action: <function...> }
+                    this.scope.formModalActionDisabled = false;
+                    this.scope.lookupHeader = options.hdr;
+                    $('#lookup-modal').modal({
+                        backdrop: 'static',
+                        keyboard: true
+                    });
+                    $('#lookup-modal').unbind('hidden.bs.modal');
+                    $(document).bind('keydown', function (e) {
+                        if (e.keyCode === 27) {
+                            $('#lookup-modal').modal('hide');
+                        }
+                    });
+                }*/
+
+                return this.scope;
+            },
+
+            build: function (options) {
+                //
+                // Generate HTML. Do NOT call this function directly. Called by inject(). Returns an HTML 
+                // string to be injected into the current view. 
+                //
+                var html = '',
+                    list = this.list,
+                    base, size, action, btn, fld, cnt, field_action, fAction, itm;
+
+                if (options.activityStream) {
+                    // Breadcrumbs for activity stream widget
+                    // Make the links clickable using ng-click function so we can first remove the stream widget
+                    // before navigation
+                    html += "<div class=\"nav-path\">\n";
+                    html += "<ul class=\"breadcrumb\">\n";
+                    html += "<li ng-repeat=\"crumb in breadcrumbs\"><a href=\"\" " + "ng-click=\"closeStream(crumb.path)\">" +
+                        "{{ crumb.title }}</a></li>\n";
+                    html += "<li class=\"active\">";
+                    html += list.editTitle;
+                    html += "</li>\n</ul>\n</div>\n";
+                } else if (options.mode !== 'lookup' && (options.breadCrumbs === undefined || options.breadCrumbs)) {
+                    //Breadcrumbs
+                    html += Breadcrumbs({
+                        list: list,
+                        mode: options.mode
+                    });
+                }
+
+                if (options.mode === 'edit' && list.editInstructions) {
+                    html += "<div class=\"alert alert-info alert-block\">\n";
+                    html += "<button type=\"button\" class=\"close\" data-dismiss=\"alert\">&times;</button>\n";
+                    html += "<strong>Hint: </strong>" + list.editInstructions + "\n";
+                    html += "</div>\n";
+                }
+
+                if (options.instructions) {
+                    html += "<div class=\"instructions alert alert-info\">" + options.instructions + "</div>\n";
+                }
+                else if (list.instructions) {
+                    html += "<div class=\"instructions alert alert-info\">" + list.instructions + "</div>\n";
+                }
+
+                if (options.mode !== 'lookup' && (list.well === undefined || list.well)) {
+                    html += "<div class=\"well\">\n";
+                }
+
+                if (options.activityStream) {
+                    // Add a title row
+                    html += "<div class=\"row\">\n";
+                    html += "<div class=\"col-lg-12\">\n";
+                    html += "<h5>{{ streamTitle }}</h5>\n";
+                    html += "</div>\n";
+                    html += "</div>\n";
+                }
+                
+                if (options.showSearch=== undefined || options.showSearch === true) {
+                    html += "<div class=\"row\">\n";
+                    if (list.name !== 'groups') {
+                        if (options.searchSize) {
+                            html += SearchWidget({
+                                iterator: list.iterator,
+                                template: list,
+                                mini: true,
+                                size: options.searchSize,
+                                searchWidgets: list.searchWidgets
+                            });
+                        } else if (options.mode === 'summary') {
+                            html += SearchWidget({
+                                iterator: list.iterator,
+                                template: list,
+                                mini: true,
+                                size: 'col-lg-6'
+                            });
+                        } else if (options.mode === 'lookup' || options.id !== undefined) {
+                            html += SearchWidget({
+                                iterator: list.iterator,
+                                template: list,
+                                mini: true,
+                                size: 'col-lg-8'
+                            });
+                        } else {
+                            html += SearchWidget({
+                                iterator: list.iterator,
+                                template: list,
+                                mini: true
+                            });
+                        }
+                    }
+
+                    if (options.mode !== 'lookup') {
+                        //actions
+                        base = $location.path().replace(/^\//, '').split('/')[0];
+                        html += "<div class=\"";
+                        if (list.name === 'groups') {
+                            html += "col-lg-12";
+                        } else if (options.searchSize && !options.listSize) {
+                            // User supplied searchSize, calc the remaining
+                            size = parseInt(options.searchSize.replace(/([A-Z]|[a-z]|\-)/g, ''));
+                            size = (list.searchWidgets) ? list.searchWidgets * size : size;
+                            html += 'col-lg-' + (12 - size);
+                        } else if (options.listSize) {
+                            html += options.listSize;
+                        } else if (options.mode === 'summary') {
+                            html += 'col-lg-6';
+                        } else if (options.id !== undefined) {
+                            html += "col-lg-4";
+                        } else {
+                            html += "col-lg-8 col-md-6";
+                        }
+                        html += "\">\n";
+
+                        html += "<div class=\"list-actions\">\n";
+
+                        // Add toolbar buttons or 'actions'
+                        for (action in list.actions) {
+                            if (list.actions[action].mode === 'all' || list.actions[action].mode === options.mode) {
+                                if ((list.actions[action].basePaths === undefined) ||
+                                    (list.actions[action].basePaths && list.actions[action].basePaths.indexOf(base) > -1)) {
+                                    html += this.button({
+                                        btn: list.actions[action],
+                                        action: action,
+                                        toolbar: true
+                                    });
+                                }
+                            }
+                        }
+
+                        //select instructions
+                        if (options.mode === 'select' && list.selectInstructions) {
+                            btn = {
+                                awPopOver: list.selectInstructions,
+                                dataPlacement: 'left',
+                                dataContainer: 'body',
+                                'class': 'btn-xs btn-help',
+                                awToolTip: 'Click for help',
+                                dataTitle: 'Help',
+                                iconSize: 'fa-lg'
+                            };
+                            //html += this.button(btn, 'select');
+                            html += this.button({
+                                btn: btn,
+                                action: 'help',
+                                toolbar: true
+                            });
+                        }
+
+                        html += "</div><!-- list-acitons -->\n";
+                        html += "</div><!-- list-actions-column -->\n";
+                    } else {
+                        //lookup
+                        html += "<div class=\"col-lg-7\"></div>\n";
+                    }
+                    html += "</div><!-- row -->\n";
+                }
+
+                // Add a title and optionally a close button (used on Inventory->Groups)
+                if (options.mode !== 'lookup' && list.showTitle) {
+                    html += "<div class=\"form-title\">";
+                    html += (options.mode === 'edit' || options.mode === 'summary') ? list.editTitle : list.addTitle;
+                    html += "</div>\n";
+                }
+                
+                // table header row
+                html += "<div class=\"list-table-container\">\n";
+                html += "<table id=\"" + list.name + "_table\" ";
+                html += "class=\"table table-condensed";
+                html += (list['class']) ? " " + list['class'] : "";
+                html += (options.mode !== 'summary' && options.mode !== 'edit' && (options.mode === 'lookup' || options.id)) ?
+                    ' table-hover-inverse' : '';
+                html += (list.hover) ? ' table-hover' : '';
+                html += (options.mode === 'summary') ? ' table-summary' : '';
+                html += "\" ";
+                html += ">\n";
+                
+                if (!options.skipTableHead) {
+                    html += this.buildHeader(options);
+                }
+
+                // table body
+                html += "<tbody>\n";
+                html += "<tr ng-class=\"" + list.iterator;
+                html += (options.mode === 'lookup' || options.mode === 'select') ? ".success_class" : ".active_class";
+                html += "\" ";
+                html += "class=\"" + list.iterator + "_class\" ";
+                html += "ng-repeat=\"" + list.iterator + " in " + list.name;
+                html += (list.orderBy) ? " | orderBy:'" + list.orderBy + "'" : "";
+                html += (list.filterBy) ? " | filter: " + list.filterBy : "";
+                html += "\">\n";
+                if (list.index) {
+                    html += "<td class=\"index-column hidden-xs\">{{ $index + ((" + list.iterator + "_page - 1) * " + list.iterator + "_page_size) + 1 }}.</td>\n";
+                }
+                cnt = 2;
+                base = (list.base) ? list.base : list.name;
+                base = base.replace(/^\//, '');
+                for (fld in list.fields) {
+                    cnt++;
+                    if ((list.fields[fld].searchOnly === undefined || list.fields[fld].searchOnly === false) &&
+                        !(options.mode === 'lookup' && list.fields[fld].excludeModal !== undefined &&
+                        list.fields[fld].excludeModal === true)) {
+                        html += Column({
+                            list: list,
+                            fld: fld,
+                            options: options,
+                            base: base
+                        });
+                    }
+                }
+
+                if (options.mode === 'select' || options.mode === 'lookup') {
+                    html += "<td><input type=\"checkbox\" ng-model=\"" + list.iterator + ".checked\" name=\"check_{{" +
+                        list.iterator + ".id }}\" ng-click=\"toggle_" + list.iterator + "(" + list.iterator + ".id, true)\" ng-true-value=\"1\" " +
+                        "ng-false-value=\"0\" id=\"check_{{" + list.iterator + ".id}}\" /></td>";
+                } else if ((options.mode === 'edit' || options.mode === 'summary') && list.fieldActions) {
+
+                    // Row level actions
+
+                    html += "<td class=\"actions\">";
+
+                    for (field_action in list.fieldActions) {
+                        if (field_action !== 'columnClass') {
+                            if (list.fieldActions[field_action].type && list.fieldActions[field_action].type === 'DropDown') {
+                                html += DropDown({
+                                    list: list,
+                                    fld: field_action,
+                                    options: options,
+                                    base: base,
+                                    type: 'fieldActions',
+                                    td: false
+                                });
+                            } else {
+                                fAction = list.fieldActions[field_action];
+                                html += "<a id=\"";
+                                html += (fAction.id) ? fAction.id : field_action + "-action";
+                                html += "\" ";
+                                html += (fAction.href) ? "href=\"" + fAction.href + "\" " : "";
+                                html += (fAction.ngHref) ? "ng-href=\"" + fAction.ngHref + "\" " : "";
+                                html += (field_action === 'cancel') ? "class=\"cancel red-txt\" " : "";
+                                html += (fAction.awPopOver) ? "aw-pop-over=\"" + fAction.awPopOver + "\" " : "";
+                                html += (fAction.dataPlacement) ? Attr(fAction, 'dataPlacement') : "";
+                                html += (fAction.dataTitle) ? Attr(fAction, 'dataTitle') : "";
+                                for (itm in fAction) {
+                                    if (itm !== 'ngHref' && itm !== 'href' && itm !== 'label' && itm !== 'icon' && itm !== 'class' &&
+                                        itm !== 'iconClass' && itm !== "dataPlacement" && itm !== "awPopOver" &&
+                                        itm !== "dataTitle") {
+                                        html += Attr(fAction, itm);
+                                    }
+                                }
+                                html += ">";
+                                if (fAction.iconClass) {
+                                    html += "<i class=\"" + fAction.iconClass + "\"></i>";
+                                } else {
+                                    html += SelectIcon({
+                                        action: field_action
+                                    });
+                                }
+                                //html += (fAction.label) ? "<span class=\"list-action-label\"> " + list.fieldActions[field_action].label +
+                                //    "</span>" : "";
+                                html += "</a>";
+                            }
+                        }
+                    }
+                    html += "</td>\n";
+                }
+                html += "</tr>\n";
+
+                // Message for when a collection is empty
+                html += "<tr class=\"loading-info\" ng-show=\"" + list.iterator + "Loading == false && " + list.name + ".length == 0\">\n";
+                html += "<td colspan=\"" + cnt + "\"><div class=\"loading-info\">No records matched your search.</div></td>\n";
+                html += "</tr>\n";
+
+                // Message for loading
+                html += "<tr class=\"loading-info\" ng-show=\"" + list.iterator + "Loading == true\">\n";
+                html += "<td colspan=\"" + cnt + "\"><div class=\"loading-info\">Loading...</div></td>\n";
+                html += "</tr>\n";
+
+                // End List
+                html += "</tbody>\n";
+                html += "</table>\n";
+                html += "</div><!-- table container -->\n";
+
+                if (options.mode === 'select' && (options.selectButton === undefined || options.selectButton)) {
+                    html += "<div class=\"navigation-buttons\">\n";
+                    html += " <button class=\"btn btn-sm btn-primary pull-right\" aw-tool-tip=\"Complete your selection\" " +
+                        "ng-click=\"finishSelection()\" ng-disabled=\"disableSelectBtn\"><i class=\"fa fa-check\"></i> Select</button>\n";
+                    html += "</div>\n";
+                }
+
+                if (options.mode !== 'lookup' && (list.well === undefined || list.well === true)) {
+                    html += "</div>\n"; //well
+                }
+
+                if (list.name !== 'groups') {
+                    if (options.mode === 'lookup' || (options.id && options.id === "form-modal-body")) {
+                        html += PaginateWidget({
+                            set: list.name,
+                            iterator: list.iterator
+                        });
+                    } else {
+                        html += PaginateWidget({
+                            set: list.name,
+                            iterator: list.iterator
+                        });
+                    }
+                }
+
+                return html;
+            },
+
+            buildHeader: function(options) {
+                var list = this.list,
+                    fld, html;
+                
+                if (options === undefined) {
+                    options = this.options;
+                }
+                
+                html = "<thead>\n";
+                html += "<tr>\n";
+                if (list.index) {
+                    html += "<th class=\"col-lg-1 col-md-1 col-sm-2 hidden-xs\">#</th>\n";
+                }
+                for (fld in list.fields) {
+                    if ((list.fields[fld].searchOnly === undefined || list.fields[fld].searchOnly === false) &&
+                        !(options.mode === 'lookup' && list.fields[fld].excludeModal !== undefined && list.fields[fld].excludeModal === true)) {
+                        html += "<th class=\"list-header";
+                        html += (list.fields[fld].columnClass) ? " " + list.fields[fld].columnClass : "";
+                        html += "\" id=\"" + list.iterator + "-" + fld + "-header\"";
+                        html += (list.fields[fld].columnShow) ? " ng-show=\"" + list.fields[fld].columnShow + "\" " : "";
+                        html += (list.fields[fld].nosort === undefined || list.fields[fld].nosort !== true) ? " ng-click=\"sort('" + list.iterator + "','" + fld + "')\"" : "";
+                        html += ">";
+                        html += list.fields[fld].label;
+                        if (list.fields[fld].nosort === undefined || list.fields[fld].nosort !== true) {
+                            html += " <i class=\"fa ";
+                            if (list.fields[fld].key) {
+                                if (list.fields[fld].desc) {
+                                    html += "fa-sort-down";
+                                } else {
+                                    html += "fa-sort-up";
+                                }
+                            } else {
+                                html += "fa-sort";
+                            }
+                            html += "\"></i></a>";
+                        }
+                        html += "</th>\n";
+                    }
+                }
+                if (options.mode === 'select' || options.mode === 'lookup') {
+                    html += "<th>Select</th>";
+                } else if (options.mode === 'edit' && list.fieldActions) {
+                    html += "<th class=\"actions-column";
+                    html += (list.fieldActions && list.fieldActions.columnClass) ? " " + list.fieldActions.columnClass : "";
+                    html += "\">Actions</th>\n";
+                }
+                html += "</tr>\n";
+                html += "</thead>\n";
+                return html;
+            }
+        };
+    }]);
\ No newline at end of file