diff --git a/awx/ui/static/js/system-tracking/compare-facts.js b/awx/ui/static/js/system-tracking/compare-facts/main.js
similarity index 91%
rename from awx/ui/static/js/system-tracking/compare-facts.js
rename to awx/ui/static/js/system-tracking/compare-facts/main.js
index b8e466f00a..e7927df005 100644
--- a/awx/ui/static/js/system-tracking/compare-facts.js
+++ b/awx/ui/static/js/system-tracking/compare-facts/main.js
@@ -4,9 +4,9 @@
  * All Rights Reserved
  *************************************************/
 
-import compareNestedFacts from './compare-facts/nested';
-import compareFlatFacts from './compare-facts/flat';
-import FactTemplate from './compare-facts/fact-template';
+import compareNestedFacts from './nested';
+import compareFlatFacts from './flat';
+import FactTemplate from './fact-template';
 
 export function compareFacts(module, facts) {
 
diff --git a/awx/ui/static/js/system-tracking/data-services/main.js b/awx/ui/static/js/system-tracking/data-services/main.js
new file mode 100644
index 0000000000..cf72087b27
--- /dev/null
+++ b/awx/ui/static/js/system-tracking/data-services/main.js
@@ -0,0 +1,11 @@
+import factScanDataService from './fact-scan-data.service';
+import getDataForComparison from './get-data-for-comparison.factory';
+import getModuleOptions from './get-module-options.factory';
+import resolveEmptyVersions from './resolve-empty-versions.factory';
+
+export default
+    angular.module('systemTracking.dataServices', [])
+        .factory('getModuleOptions', getModuleOptions)
+        .factory('getDataForComparison', getDataForComparison)
+        .factory('resolveEmptyVersions', resolveEmptyVersions)
+        .service('factScanDataService', factScanDataService);
diff --git a/awx/ui/static/js/system-tracking/fact-data-table.partial.html b/awx/ui/static/js/system-tracking/fact-data-table.partial.html
deleted file mode 100644
index 22e17b1d4b..0000000000
--- a/awx/ui/static/js/system-tracking/fact-data-table.partial.html
+++ /dev/null
@@ -1,38 +0,0 @@
-<table class="table table-condensed">
-    <thead>
-    <tr>
-        <th></th>
-        <th>{{comparisonLeftHeader|stringOrDate:'L'}}</th>
-        <th>{{comparisonRightHeader|stringOrDate:'L'}}</th>
-    </tr>
-    </thead>
-    <tbody ng-repeat="group in factData">
-    <tr ng-switch="group.nestingLevel" ng-if="group.displayKeyPath">
-        <td colspan="3" ng-switch-when="0">
-            <h2>{{group.displayKeyPath}}</h2>
-        </td>
-        <td colspan="3" ng-switch-when="1">
-            <h3>{{group.displayKeyPath}}</h3>
-        </td>
-        <td colspan="3" ng-switch-when="2">
-            <h4>{{group.displayKeyPath}}</h4>
-        </td>
-        <td colspan="3" ng-switch-when="3">
-            <h5>{{group.displayKeyPath}}</h5>
-        </td>
-    </tr>
-    <tr ng-repeat="fact in group.facts" data-fact-array-position="{{fact.arrayPosition}}">
-        <td>{{fact.keyName}}</td>
-        <td>
-            <p style="word-break: break-all;">
-            {{fact.value1}}
-            </p>
-        </td>
-        <td>
-            <p style="word-break: break-all;">
-            {{fact.value2}}
-            </p>
-        </td>
-    </tr>
-    </tbody>
-</table>
diff --git a/awx/ui/static/js/system-tracking/fact-data-error.block.less b/awx/ui/static/js/system-tracking/fact-data-table/fact-data-error.block.less
similarity index 100%
rename from awx/ui/static/js/system-tracking/fact-data-error.block.less
rename to awx/ui/static/js/system-tracking/fact-data-table/fact-data-error.block.less
diff --git a/awx/ui/static/js/system-tracking/fact-data-group.block.less b/awx/ui/static/js/system-tracking/fact-data-table/fact-data-group.block.less
similarity index 100%
rename from awx/ui/static/js/system-tracking/fact-data-group.block.less
rename to awx/ui/static/js/system-tracking/fact-data-table/fact-data-group.block.less
diff --git a/awx/ui/static/js/system-tracking/fact-data-table-heading.block.less b/awx/ui/static/js/system-tracking/fact-data-table/fact-data-table-heading.block.less
similarity index 100%
rename from awx/ui/static/js/system-tracking/fact-data-table-heading.block.less
rename to awx/ui/static/js/system-tracking/fact-data-table/fact-data-table-heading.block.less
diff --git a/awx/ui/static/js/system-tracking/fact-data-table.block.less b/awx/ui/static/js/system-tracking/fact-data-table/fact-data-table.block.less
similarity index 100%
rename from awx/ui/static/js/system-tracking/fact-data-table.block.less
rename to awx/ui/static/js/system-tracking/fact-data-table/fact-data-table.block.less
diff --git a/awx/ui/static/js/system-tracking/fact-data-table/fact-data-table.directive.js b/awx/ui/static/js/system-tracking/fact-data-table/fact-data-table.directive.js
new file mode 100644
index 0000000000..8bac06f3ae
--- /dev/null
+++ b/awx/ui/static/js/system-tracking/fact-data-table/fact-data-table.directive.js
@@ -0,0 +1,16 @@
+/* jshint unused: vars */
+
+export default
+    [   function() {
+            return  {   restrict: 'E',
+                        templateUrl: '/static/js/system-tracking/fact-data-table/fact-data-table.partial.html',
+                        scope:
+                            {   leftHostname: '=',
+                                rightHostname: '=',
+                                leftScanDate: '=',
+                                rightScanDate: '=',
+                                factData: '='
+                            }
+                    };
+        }
+    ];
diff --git a/awx/ui/static/js/system-tracking/fact-data-table/fact-data-table.partial.html b/awx/ui/static/js/system-tracking/fact-data-table/fact-data-table.partial.html
new file mode 100644
index 0000000000..ca466cba45
--- /dev/null
+++ b/awx/ui/static/js/system-tracking/fact-data-table/fact-data-table.partial.html
@@ -0,0 +1,62 @@
+<section class="FactDataTable SystemTrackingContainer-main" ng-if="!error">
+    <div class="FactDataTable-headingRow">
+        <h3 class="FactDataTable-column FactDataTableHeading">
+          <span class="FactDataTableHeading-label">
+            Comparing facts collected from:
+          </span>
+        </h3>
+        <h3 class="FactDataTable-column FactDataTableHeading">
+          <span class="FactDataTableHeading-host">{{leftHostname}}</span>
+          <span class="FactDataTableHeading-date">{{leftScanDate|longDate}}</span>
+        </h3>
+        <h3 class="FactDataTable-column FactDataTableHeading">
+          <span class="FactDataTableHeading-host">{{rightHostname}}</span>
+          <span class="FactDataTableHeading-date">{{rightScanDate|longDate}}</span>
+        </h3>
+    </div>
+    <div ng-if="!isNestedDisplay">
+        <div class="FactDataTable-row" ng-repeat="group in factData | orderBy: 'displayKeyPath'">
+            <span class="FactDataTable-column">{{group.facts.keyName}}</span>
+            <span class="FactDataTable-column">{{group.facts.value1}}</span>
+            <span class="FactDataTable-column">{{group.facts.value2}}</span>
+        </div>
+    </div>
+    <div ng-if="isNestedDisplay">
+
+        <div class="FactDataTable-factGroup FactDataGroup" ng-repeat="group in factData | orderBy: 'displayKeyPath'">
+
+            <div class="FactDataTable-groupHeadingRow" ng-if="group.displayKeyPath">
+                <h2 class="FactDataTable-column FactDataTable-column--full FactDataGroup-header">
+                    {{group.displayKeyPath}}
+                </h2>
+            </div>
+            <div class="FactDataGroup-facts" data-facts="{{group.facts}}">
+                <div class="FactDataTable-arrayGroup" ng-if="group.isFactArray" ng-repeat="arrayGroup in group.facts" data-array-group="{{arrayGroup}}">
+                    <div class="FactDataTable-row FactDatum" ng-class="{'FactDatum--divergent': fact.isDivergent }" ng-repeat="fact in arrayGroup" data-fact="{{fact}}">
+                        <span class="FactDatum-keyName FactDataTable-column">
+                        {{fact.keyName}}
+                        </span>
+                        <span class="FactDatum-value FactDataTable-column u-truncatedText">
+                        {{fact.value1}}
+                        </span>
+                        <span class="FactDatum-value FactDataTable-column u-truncatedText">
+                        {{fact.value2}}
+                        </span>
+                    </div>
+                </div>
+                <div class="FactDataTable-row FactDatum" ng-class="{'FactDatum--divergent': fact.isDivergent }" ng-repeat="fact in group.facts" ng-unless="group.isFactArray" data-fact="{{fact}}">
+                    <span class="FactDataTable-column FactDatum-keyName">
+                    {{fact.keyName}}
+                    </span>
+                    <span class="FactDataTable-column FactDatum-value" truncated-text>
+                    {{fact.value1}}
+                    </span>
+                    <span class="FactDataTable-column FactDatum-value" truncated-text>
+                    {{fact.value2}}
+                    </span>
+                </div>
+            </div>
+        </div>
+    </div>
+
+</section>
diff --git a/awx/ui/static/js/system-tracking/fact-datum.block.less b/awx/ui/static/js/system-tracking/fact-data-table/fact-datum.block.less
similarity index 100%
rename from awx/ui/static/js/system-tracking/fact-datum.block.less
rename to awx/ui/static/js/system-tracking/fact-data-table/fact-datum.block.less
diff --git a/awx/ui/static/js/system-tracking/fact-data-table/main.js b/awx/ui/static/js/system-tracking/fact-data-table/main.js
new file mode 100644
index 0000000000..d77cd22fee
--- /dev/null
+++ b/awx/ui/static/js/system-tracking/fact-data-table/main.js
@@ -0,0 +1,5 @@
+import factDataTable from './fact-data-table.directive';
+
+export default
+    angular.module('systemTracking.factDataTable', [])
+        .directive('factDataTable', factDataTable);
diff --git a/awx/ui/static/js/system-tracking/main.js b/awx/ui/static/js/system-tracking/main.js
index 956b80be8d..9800ee677d 100644
--- a/awx/ui/static/js/system-tracking/main.js
+++ b/awx/ui/static/js/system-tracking/main.js
@@ -5,27 +5,22 @@
  *************************************************/
 
 import route from './system-tracking.route';
-import factScanDataService from './data-services/fact-scan-data.service';
-import getDataForComparison from './data-services/get-data-for-comparison.factory';
-import getModuleOptions from './data-services/get-module-options.factory';
-import resolveEmptyVersions from './data-services/resolve-empty-versions.factory';
 import controller from './system-tracking.controller';
-import stringOrDateFilter from './string-or-date.filter';
 import shared from 'tower/shared/main';
 import utilities from 'tower/shared/Utilities';
+
 import datePicker from './date-picker/main';
+import dataServices from './data-services/main';
+import factDataTable from './fact-data-table/main';
 
 export default
     angular.module('systemTracking',
                    [   utilities.name,
                        shared.name,
-                       datePicker.name
+                       datePicker.name,
+                       factDataTable.name,
+                       dataServices.name
                    ])
-        .service('factScanDataService', factScanDataService)
-        .factory('getDataForComparison', getDataForComparison)
-        .factory('getModuleOptions', getModuleOptions)
-        .factory('resolveEmptyVersions', resolveEmptyVersions)
-        .filter('stringOrDate', stringOrDateFilter)
         .controller('systemTracking', controller)
         .config(['$routeProvider', function($routeProvider) {
             var url = route.route;
diff --git a/awx/ui/static/js/system-tracking/string-or-date.filter.js b/awx/ui/static/js/system-tracking/string-or-date.filter.js
deleted file mode 100644
index 4e3f7d387e..0000000000
--- a/awx/ui/static/js/system-tracking/string-or-date.filter.js
+++ /dev/null
@@ -1,19 +0,0 @@
-/*************************************************
- * Copyright (c) 2015 Ansible, Inc.
- *
- * All Rights Reserved
- *************************************************/
-
-export default
-    [   'amDateFormatFilter',
-        'moment',
-        function(dateFormat, moment) {
-            return function(string, format) {
-                if (moment.isMoment(string)) {
-                    return dateFormat(string, format);
-                } else {
-                    return string;
-                }
-            };
-        }
-    ];
diff --git a/awx/ui/static/js/system-tracking/system-tracking.controller.js b/awx/ui/static/js/system-tracking/system-tracking.controller.js
index 9536148a17..108c4feffd 100644
--- a/awx/ui/static/js/system-tracking/system-tracking.controller.js
+++ b/awx/ui/static/js/system-tracking/system-tracking.controller.js
@@ -5,7 +5,7 @@
  *************************************************/
 
 import {searchDateRange} from './search-date-range';
-import {compareFacts} from './compare-facts';
+import {compareFacts} from './compare-facts/main';
 
 function controller($rootScope,
                     $scope,
diff --git a/awx/ui/static/js/system-tracking/system-tracking.partial.html b/awx/ui/static/js/system-tracking/system-tracking.partial.html
index fa4c45c4ca..6f1c020119 100644
--- a/awx/ui/static/js/system-tracking/system-tracking.partial.html
+++ b/awx/ui/static/js/system-tracking/system-tracking.partial.html
@@ -40,65 +40,11 @@
         To setup or run scan jobs, edit the "<a link-to="inventoryEdit" model="{ inventory_id: inventory }">{{inventory.name}}</a>" inventory and select "Scan Jobs Templates".
         </p>
     </section>
-    <section class="FactDataTable SystemTrackingContainer-main" ng-if="!error">
-        <div class="FactDataTable-headingRow">
-            <h3 class="FactDataTable-column FactDataTableHeading">
-              <span class="FactDataTableHeading-label">
-                Comparing facts collected from:
-              </span>
-            </h3>
-            <h3 class="FactDataTable-column FactDataTableHeading">
-              <span class="FactDataTableHeading-host">{{leftHostname}}</span>
-              <span class="FactDataTableHeading-date">{{leftScanDate|longDate}}</span>
-            </h3>
-            <h3 class="FactDataTable-column FactDataTableHeading">
-              <span class="FactDataTableHeading-host">{{rightHostname}}</span>
-              <span class="FactDataTableHeading-date">{{rightScanDate|longDate}}</span>
-            </h3>
-        </div>
-        <div ng-if="!isNestedDisplay">
-            <div class="FactDataTable-row" ng-repeat="group in factData | orderBy: 'displayKeyPath'">
-                <span class="FactDataTable-column">{{group.facts.keyName}}</span>
-                <span class="FactDataTable-column">{{group.facts.value1}}</span>
-                <span class="FactDataTable-column">{{group.facts.value2}}</span>
-            </div>
-        </div>
-        <div ng-if="isNestedDisplay">
-
-            <div class="FactDataTable-factGroup FactDataGroup" ng-repeat="group in factData | orderBy: 'displayKeyPath'">
-
-                <div class="FactDataTable-groupHeadingRow" ng-if="group.displayKeyPath">
-                    <h2 class="FactDataTable-column FactDataTable-column--full FactDataGroup-header">
-                        {{group.displayKeyPath}}
-                    </h2>
-                </div>
-                <div class="FactDataGroup-facts" data-facts="{{group.facts}}">
-                    <div class="FactDataTable-arrayGroup" ng-if="group.isFactArray" ng-repeat="arrayGroup in group.facts" data-array-group="{{arrayGroup}}">
-                        <div class="FactDataTable-row FactDatum" ng-class="{'FactDatum--divergent': fact.isDivergent }" ng-repeat="fact in arrayGroup" data-fact="{{fact}}">
-                            <span class="FactDatum-keyName FactDataTable-column">
-                            {{fact.keyName}}
-                            </span>
-                            <span class="FactDatum-value FactDataTable-column u-truncatedText">
-                            {{fact.value1}}
-                            </span>
-                            <span class="FactDatum-value FactDataTable-column u-truncatedText">
-                            {{fact.value2}}
-                            </span>
-                        </div>
-                    </div>
-                    <div class="FactDataTable-row FactDatum" ng-class="{'FactDatum--divergent': fact.isDivergent }" ng-repeat="fact in group.facts" ng-unless="group.isFactArray" data-fact="{{fact}}">
-                        <span class="FactDataTable-column FactDatum-keyName">
-                        {{fact.keyName}}
-                        </span>
-                        <span class="FactDataTable-column FactDatum-value" truncated-text>
-                        {{fact.value1}}
-                        </span>
-                        <span class="FactDataTable-column FactDatum-value" truncated-text>
-                        {{fact.value2}}
-                        </span>
-                    </div>
-                </div>
-        </div>
-
-    </section>
+    <fact-data-table
+        left-hostname="leftHostname"
+        right-hostname="rightHostname"
+        left-scan-date="leftScanDate"
+        right-scan-date="rightScanDate"
+        fact-data="factData">
+    </fact-data-table>
 </section>