diff --git a/awx/ui/client/lib/components/code-mirror/code-mirror.directive.js b/awx/ui/client/lib/components/code-mirror/code-mirror.directive.js
index 4eba4d2393..6d74f2a6aa 100644
--- a/awx/ui/client/lib/components/code-mirror/code-mirror.directive.js
+++ b/awx/ui/client/lib/components/code-mirror/code-mirror.directive.js
@@ -1,6 +1,5 @@
 const templateUrl = require('~components/code-mirror/code-mirror.partial.html');
 
-const CodeMirrorEventListener = 'CodeMirror-init';
 const CodeMirrorID = 'codemirror-extra-vars';
 const CodeMirrorModalID = '#CodeMirror-modal';
 const ParseVariable = 'parseType';
@@ -43,10 +42,10 @@ function atCodeMirrorController (
     vm.expanded = false;
     vm.close = close;
     vm.expand = expand;
+    if ($scope.init) {
+        $scope.init = init;
+    }
     init($scope.variables);
-    $scope.$on(CodeMirrorEventListener, (e, vars) => {
-        init(vars);
-    });
 }
 
 atCodeMirrorController.$inject = [
@@ -70,7 +69,8 @@ function atCodeMirrorTextarea () {
             labelClass: '@',
             tooltip: '@',
             tooltipPlacement: '@',
-            variables: '@'
+            variables: '@',
+            init: '='
         }
     };
 }
diff --git a/awx/ui/client/src/network-ui/network-details/details.controller.js b/awx/ui/client/src/network-ui/network-details/details.controller.js
index 9e7ceab874..ff30b97e9f 100644
--- a/awx/ui/client/src/network-ui/network-details/details.controller.js
+++ b/awx/ui/client/src/network-ui/network-details/details.controller.js
@@ -8,6 +8,12 @@
  	['$scope', 'HostsService',
  	function($scope, HostsService){
 
+        function codemirror () {
+            return {
+                init:{}
+            };
+        }
+        $scope.codeMirror = new codemirror();
  		$scope.formCancel = function(){
             $scope.$parent.$broadcast('awxNet-closeDetailsPanel');
  		};
@@ -38,6 +44,8 @@
             } else {
                 $scope.item = data;
             }
-            $scope.$broadcast('CodeMirror-init', $scope.item.variables);
+            if ($scope.codeMirror.init) {
+                $scope.codeMirror.init($scope.item.variables);
+            }
         });
  	}];
diff --git a/awx/ui/client/src/network-ui/network-details/details.partial.html b/awx/ui/client/src/network-ui/network-details/details.partial.html
index a7460576ce..f7771e8916 100644
--- a/awx/ui/client/src/network-ui/network-details/details.partial.html
+++ b/awx/ui/client/src/network-ui/network-details/details.partial.html
@@ -34,7 +34,8 @@
             <at-code-mirror
                 disabled="true"
                 variables="{{ item.variables }}"
-                tooltip-placement="left">
+                tooltip-placement="left"
+                init="codeMirror.init">
             </at-code-mirror>
         </div>
     </form>