diff --git a/awx/ui/client/src/shared/features/features.directive.js b/awx/ui/client/src/shared/features/features.directive.js
index 3d785e4067..341afba0a2 100644
--- a/awx/ui/client/src/shared/features/features.directive.js
+++ b/awx/ui/client/src/shared/features/features.directive.js
@@ -23,15 +23,17 @@
 */
 import featureController from './features.controller';
 
-export default [  function() {
+export default [ '$rootScope', function($rootScope) {
     return {
         restrict: 'A',
         controller: featureController,
         link: function (scope, element, attrs, controller){
             if(attrs.awFeature.length > 0){
-                if(!controller.isFeatureEnabled(attrs.awFeature)){
-                    element.remove();
-                }
+                $rootScope.featuresConfigured.promise.then(function() {
+                    if(!controller.isFeatureEnabled(attrs.awFeature)){
+                        element.remove();
+                    }
+                });
             }
         }
 
diff --git a/awx/ui/tests/spec/features/features.directive-test.js b/awx/ui/tests/spec/features/features.directive-test.js
index a6c89e9494..b931c8a921 100644
--- a/awx/ui/tests/spec/features/features.directive-test.js
+++ b/awx/ui/tests/spec/features/features.directive-test.js
@@ -2,13 +2,17 @@
 
 describe('Directive: Features enabled/disabled', () => {
  let $compile,
-      $scope;
+      $scope,
+      q;
 
   beforeEach(angular.mock.module('features'));
 
-  beforeEach(angular.mock.inject((_$compile_, _$rootScope_) => {
-    $compile = _$compile_;
-    $scope = _$rootScope_;
+  beforeEach(angular.mock.inject((_$compile_, _$rootScope_, $q) => {
+      $compile = _$compile_;
+      $scope = _$rootScope_;
+      q = $q;
+
+      $scope.featuresConfigured = q.defer();
   }));
 
   it('Removes the element if feature is disabled', () => {