diff --git a/awx/ui/static/js/system-tracking/compare-facts.js b/awx/ui/static/js/system-tracking/compare-facts.js
index 04d1ee3a6d..fc64465624 100644
--- a/awx/ui/static/js/system-tracking/compare-facts.js
+++ b/awx/ui/static/js/system-tracking/compare-facts.js
@@ -6,6 +6,7 @@
 
 import compareNestedFacts from './compare-facts/nested';
 import compareFlatFacts from './compare-facts/flat';
+import FactTemplate from './compare-facts/fact-template';
 
 export function compareFacts(module, facts) {
     if (module.displayType === 'nested') {
@@ -15,7 +16,11 @@ export function compareFacts(module, facts) {
     } else {
         // For flat structures we compare left-to-right, then right-to-left to
         // make sure we get a good comparison between both hosts
-        var compare = _.partialRight(compareFlatFacts, module.nameKey, module.compareKey, module.factTemplate);
+        var compare = _.partialRight(compareFlatFacts,
+                                     module.nameKey,
+                                     module.compareKey,
+                                     new FactTemplate(module.factTemplate));
+
         var leftToRight = compare(facts[0], facts[1]);
         var rightToLeft = compare(facts[1], facts[0]);
 
diff --git a/awx/ui/static/js/system-tracking/compare-facts/flat.js b/awx/ui/static/js/system-tracking/compare-facts/flat.js
index 00ae634340..887b8fd2ad 100644
--- a/awx/ui/static/js/system-tracking/compare-facts/flat.js
+++ b/awx/ui/static/js/system-tracking/compare-facts/flat.js
@@ -4,23 +4,6 @@
  * All Rights Reserved
  *************************************************/
 
-import stringFilters from 'tower/shared/string-filters/main';
-
-var $injector = angular.injector(['ng', stringFilters.name]);
-var $interpolate = $injector.get('$interpolate');
-
-function getFactTemplate(factTemplate, fact) {
-    if (_.isFunction(factTemplate)) {
-        return factTemplate(fact);
-    } else {
-        return factTemplate;
-    }
-}
-
-function renderFactTemplate(template, fact) {
-    return $interpolate(template)(fact);
-}
-
 function slotFactValues(basisPosition, basisValue, comparatorValue) {
     var leftValue, rightValue;
 
@@ -45,7 +28,7 @@ export default
             var searcher = {};
             searcher[nameKey] = basisFact[nameKey];
 
-            var basisTemplate, comparatorTemplate, slottedValues, basisValue, comparatorValue;
+            var slottedValues, basisValue, comparatorValue;
 
             var matchingFact = _.where(comparatorFacts.facts, searcher);
             var diffs;
@@ -54,9 +37,7 @@ export default
 
                 if (!_.isUndefined(factTemplate)) {
 
-                    basisTemplate = getFactTemplate(factTemplate, basisFact);
-
-                    basisValue = renderFactTemplate(basisTemplate, basisFact);
+                    basisValue = factTemplate.render(basisFact);
                     slottedValues = slotFactValues(basisFacts.position, basisValue, 'absent');
 
                     diffs =
@@ -76,7 +57,7 @@ export default
                                         value1IsAbsent: slottedValues.left === 'absent',
                                         value2: slottedValues.right,
                                         value2IsAbsent: slottedValues.right === 'absent'
-                                    };
+                                   };
                         });
                 }
             } else {
@@ -85,11 +66,8 @@ export default
 
                 if (!_.isUndefined(factTemplate)) {
 
-                    basisTemplate = getFactTemplate(factTemplate, basisFact);
-                    comparatorTemplate = getFactTemplate(factTemplate, matchingFact);
-
-                    basisValue = renderFactTemplate(basisTemplate, basisFact);
-                    comparatorValue = renderFactTemplate(comparatorTemplate, matchingFact);
+                    basisValue = factTemplate.render(basisFact);
+                    comparatorValue = factTemplate.render(matchingFact);
 
                     slottedValues = slotFactValues(basisFacts.position, basisValue, comparatorValue);
 
diff --git a/awx/ui/tests/unit/system-tracking/compare-facts/flat-test.js b/awx/ui/tests/unit/system-tracking/compare-facts/flat-test.js
index 52b0933a63..6c829d33c1 100644
--- a/awx/ui/tests/unit/system-tracking/compare-facts/flat-test.js
+++ b/awx/ui/tests/unit/system-tracking/compare-facts/flat-test.js
@@ -73,10 +73,6 @@ describe('CompareFacts.Flat', function() {
             return facts;
         }
 
-        beforeEach(function () {
-
-        });
-
         it('uses "absent" for the missing value', function() {
 
             var facts = factData([{  'name': 'foo'
@@ -123,5 +119,62 @@ describe('CompareFacts.Flat', function() {
                 }]);
 
         });
+
+        context('with factTemplate', function() {
+            it('does not attempt to render the absent fact', function() {
+                var facts = factData([{  'name': 'foo'
+                                     }]);
+
+                var renderCallCount = 0;
+                var factTemplate =
+                    {   render: function() {
+                                    renderCallCount++;
+                                },
+                        template: ""
+                    };
+
+                compareFacts(facts[0], facts[1], 'name', ['value'], factTemplate);
+
+                expect(renderCallCount).to.equal(1);
+
+            });
+        });
+    });
+
+    context('with factTemplate', function() {
+        var factData;
+
+        beforeEach(function() {
+            factData = [{   position: 'left',
+                            facts:
+                            [{  'name': 'foo',
+                                'value': 'bar'
+                            }]
+                        },
+                        {   position: 'right',
+                            facts:
+                            [{  'name': 'foo',
+                                'value': 'baz'
+                            }]
+                        }];
+        });
+
+        it('renders the template with each provided fact', function() {
+
+            var renderCalledWith = [];
+            var factTemplate =
+                {   render: function(fact) {
+                                renderCalledWith.push(fact);
+                            },
+                    template: ""
+                };
+
+            compareFacts(factData[0], factData[1], 'name', ['value'], factTemplate);
+
+            expect(renderCalledWith).to.include(factData[0].facts[0]);
+            expect(renderCalledWith).to.include(factData[1].facts[0]);
+        });
+
+
     });
 });