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 622aa1cb13..6bba1f34f3 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
@@ -27,6 +27,10 @@ function atCodeMirrorController (
             field_id: `${$scope.name}_variables`,
             readOnly: $scope.disabled
         });
+
+        $scope.$watch(variablesName, () => {
+            $scope.variables = $scope[variablesName];
+        });
     }
 
     function expand () {
diff --git a/awx/ui/client/lib/components/code-mirror/code-mirror.partial.html b/awx/ui/client/lib/components/code-mirror/code-mirror.partial.html
index a832ca8b6e..6b45b94cc9 100644
--- a/awx/ui/client/lib/components/code-mirror/code-mirror.partial.html
+++ b/awx/ui/client/lib/components/code-mirror/code-mirror.partial.html
@@ -53,7 +53,7 @@
         name="{{ vm.name }}"
         ng-if="vm.expanded"
         modal-vars="variables"
-        parse-type="parseType"
+        modal-parse-type="parseType"
         tooltip="{{ tooltip || vm.strings.get('code_mirror.tooltip.TOOLTIP') }}"
         label="{{ label || vm.strings.get('code_mirror.label.VARIABLES') }}"
         disabled="{{ disabled || false }}"
diff --git a/awx/ui/client/lib/components/code-mirror/modal/code-mirror-modal.directive.js b/awx/ui/client/lib/components/code-mirror/modal/code-mirror-modal.directive.js
index e8a8476985..916ed5b9d3 100644
--- a/awx/ui/client/lib/components/code-mirror/modal/code-mirror-modal.directive.js
+++ b/awx/ui/client/lib/components/code-mirror/modal/code-mirror-modal.directive.js
@@ -1,8 +1,6 @@
 const templateUrl = require('~components/code-mirror/modal/code-mirror-modal.partial.html');
 
 const CodeMirrorModalID = '#CodeMirror-modal';
-// const ParseVariable = 'parseType';
-const ParseType = 'yaml';
 const ModalHeight = '#CodeMirror-modal .modal-dialog';
 const ModalHeader = '.atCodeMirror-label';
 const ModalFooter = '.CodeMirror-modalControls';
@@ -13,7 +11,6 @@ function atCodeMirrorModalController (
     ParseTypeChange
 ) {
     const vm = this;
-    // const variablesName = `${$scope.name}_variables`;
     function resize () {
         if ($scope.disabled === 'true') {
             $scope.disabled = true;
@@ -27,7 +24,7 @@ function atCodeMirrorModalController (
     }
 
     function toggle () {
-        $scope.parseTypeChange('parseType', 'modalVars');
+        $scope.parseTypeChange('modalParseType', 'modalVars');
         setTimeout(resize, 0);
     }
 
@@ -38,11 +35,10 @@ function atCodeMirrorModalController (
             $scope.disabled = false;
         }
         $(CodeMirrorModalID).modal('show');
-        $scope.parseType = ParseType;
         ParseTypeChange({
             scope: $scope,
             variable: 'modalVars',
-            parse_variable: 'parseType',
+            parse_variable: 'modalParseType',
             field_id: 'variables_modal',
             readOnly: $scope.disabled
         });
@@ -60,7 +56,7 @@ function atCodeMirrorModalController (
     $scope.close = () => {
         $scope.closeFn({
             values: $scope.modalVars,
-            parseType: $scope.parseType,
+            parseType: $scope.modalParseType,
         });
     };
     if ($scope.init) {
@@ -91,7 +87,7 @@ function atCodeMirrorModal () {
             labelClass: '@',
             tooltip: '@',
             modalVars: '=',
-            parseType: '=',
+            modalParseType: '=',
             name: '@',
             closeFn: '&'
         }
diff --git a/awx/ui/client/lib/components/code-mirror/modal/code-mirror-modal.partial.html b/awx/ui/client/lib/components/code-mirror/modal/code-mirror-modal.partial.html
index 662565f3f3..96d31dbd7d 100644
--- a/awx/ui/client/lib/components/code-mirror/modal/code-mirror-modal.partial.html
+++ b/awx/ui/client/lib/components/code-mirror/modal/code-mirror-modal.partial.html
@@ -21,20 +21,20 @@
                          </a>
                          <div class="atCodeMirror-toggleContainer FormToggle-container">
                              <div class="btn-group">
-                                <label ng-class="{'btn-primary': parseType === 'yaml','Button-primary--hollow' : parseType === 'json'}" class="btn btn-xs btn-primary">
+                                <label ng-class="{'btn-primary': modalParseType === 'yaml','Button-primary--hollow' : modalParseType === 'json'}" class="btn btn-xs">
                                     <input
                                         type="radio"
                                         value="yaml"
-                                        ng-model="parseType"
+                                        ng-model="modalParseType"
                                         ng-change="vm.toggle()"
                                         class="ng-pristine ng-untouched ng-valid ng-not-empty">
                                             {{ vm.strings.get('label.YAML')}}
                                 </label>
-                                <label ng-class="{'btn-primary': parseType === 'json','Button-primary--hollow' : parseType === 'yaml'}" class="btn btn-xs Button-primary--hollow">
+                                <label ng-class="{'btn-primary': modalParseType === 'json','Button-primary--hollow' : modalParseType === 'yaml'}" class="btn btn-xs">
                                     <input
                                         type="radio"
                                         value="json"
-                                        ng-model="parseType"
+                                        ng-model="modalParseType"
                                         ng-change="vm.toggle()"
                                         class="ng-pristine ng-untouched ng-valid ng-not-empty">
                                             {{ vm.strings.get('label.JSON')}}