diff --git a/awx/ui/client/src/shared/limit-panels/limit-panels.directive.js b/awx/ui/client/src/shared/limit-panels/limit-panels.directive.js
index c4423d6cca..2471a1cf29 100644
--- a/awx/ui/client/src/shared/limit-panels/limit-panels.directive.js
+++ b/awx/ui/client/src/shared/limit-panels/limit-panels.directive.js
@@ -1,4 +1,4 @@
-export default ['$rootScope', '$transitions', function($rootScope, $transitions) {
+export default [function() {
     return {
         restrict: 'E',
         scope: {
@@ -7,27 +7,28 @@ export default ['$rootScope', '$transitions', function($rootScope, $transitions)
         },
         link: function(scope) {
 
-            scope.maxPanels = parseInt(scope.maxPanels);
+            const maxPanels = parseInt(scope.maxPanels);
 
-            $transitions.onSuccess({}, function() {
-                let panels = angular.element('#' + scope.panelContainer).find('.Panel');
-
-                if(panels.length > scope.maxPanels) {
-                    // hide the excess panels
-                    $(panels).each(function( index ) {
-                        if(index+1 > scope.maxPanels) {
-                            $(this).addClass('Panel-hidden');
-                        }
-                        else {
-                            $(this).removeClass('Panel-hidden');
-                        }
-                    });
+            scope.$watch(
+                () => angular.element('#' + scope.panelContainer).find('.Panel').length,
+                () => {
+                    const panels = angular.element('#' + scope.panelContainer).find('.Panel');
+                    if(panels.length > maxPanels) {
+                        // hide the excess panels
+                        $(panels).each(function( index ) {
+                            if(index+1 > maxPanels) {
+                                $(this).addClass('Panel-hidden');
+                            }
+                            else {
+                                $(this).removeClass('Panel-hidden');
+                            }
+                        });
+                    } else {
+                        // show all the panels
+                        $(panels).removeClass('Panel-hidden');
+                    }
                 }
-                else {
-                    // show all the panels
-                    $(panels).removeClass('Panel-hidden');
-                }
-            });
+            );
         }
     };
 }];