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 0315485ee4..555b9579a4 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,58 +1,57 @@
 const templateUrl = require('~components/code-mirror/code-mirror.partial.html');
 
 const CodeMirrorModalID = '#CodeMirror-modal';
-const ParseVariable = 'parseType';
 const ParseType = 'yaml';
 
 function atCodeMirrorController (
     $scope,
     strings,
-    ParseTypeChange,
-    ParseVariableString
+    ParseTypeChange
 ) {
     const vm = this;
-    const variablesName = `${$scope.name}_variables`;
-    function init (vars, name) {
-        console.log('init', $scope, vars);
+    function init () {
         if ($scope.disabled === 'true') {
             $scope.disabled = true;
         } else if ($scope.disabled === 'false') {
             $scope.disabled = false;
         }
-        $scope.variablesName = variablesName;
-        // $scope[variablesName] = ParseVariableString(_.cloneDeep(vars));
-        $scope.variables = {
-            value: ParseVariableString(_.cloneDeep(vars)),
-        };
         $scope.value = $scope.variables.value;
         $scope.parseType = ParseType;
-        const options = {
+
+        ParseTypeChange({
             scope: $scope,
-            variable: 'value', // variablesName,
-            parse_variable: ParseVariable,
-            field_id: name,
-            readOnly: $scope.disabled,
-            onChange: (value) => {
-                console.log('change', value);
-            },
-        };
-        ParseTypeChange(options);
+            variable: 'variables',
+            parse_variable: 'parseType',
+            field_id: `${$scope.name}_variables`,
+            readOnly: $scope.disabled
+        });
     }
 
     function expand () {
         vm.expanded = true;
     }
 
-    function close () {
+    function close (varsFromModal) {
+        // TODO: make sure that the variables format matches
+        // parseType before re-initializing CodeMirror.  Ex)
+        // user changes the format from yaml to json in the
+        // modal but CM in the form is set to YAML
+        $scope.variables = varsFromModal;
+        // New set of variables from the modal, reinit codemirror
+        ParseTypeChange({
+            scope: $scope,
+            variable: 'variables',
+            parse_variable: 'parseType',
+            field_id: `${$scope.name}_variables`,
+            readOnly: $scope.disabled
+        });
         $(CodeMirrorModalID).off('hidden.bs.modal');
         $(CodeMirrorModalID).modal('hide');
         $('.popover').popover('hide');
         vm.expanded = false;
     }
 
-    // vm.variablesName = variablesName;
     vm.name = $scope.name;
-    vm.modalName = `${vm.name}_modal`;
     vm.strings = strings;
     vm.expanded = false;
     vm.close = close;
@@ -68,8 +67,7 @@ function atCodeMirrorController (
 atCodeMirrorController.$inject = [
     '$scope',
     'CodeMirrorStrings',
-    'ParseTypeChange',
-    'ParseVariableString'
+    'ParseTypeChange'
 ];
 
 function atCodeMirrorTextarea () {
@@ -86,7 +84,7 @@ function atCodeMirrorTextarea () {
             labelClass: '@',
             tooltip: '@',
             tooltipPlacement: '@',
-            variables: '@',
+            variables: '=',
             name: '@',
             init: '='
         }
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 97572159f5..da1f492139 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
@@ -23,7 +23,7 @@
                             type="radio"
                             value="yaml"
                             ng-model="parseType"
-                            ng-change="parseTypeChange('parseType', vm.variables)"
+                            ng-change="parseTypeChange('parseType', 'variables')"
                             class="ng-pristine ng-untouched ng-valid ng-not-empty">
                                 {{ vm.strings.get('label.YAML')}}
                     </label>
@@ -32,7 +32,7 @@
                             type="radio"
                             value="json"
                             ng-model="parseType"
-                            ng-change="parseTypeChange('parseType', vm.variables)"
+                            ng-change="parseTypeChange('parseType', 'variables')"
                             class="ng-pristine ng-untouched ng-valid ng-not-empty">
                                 {{ vm.strings.get('label.JSON')}}
                     </label>
@@ -44,18 +44,18 @@
     <textarea
         ng-disabled="disabled"
         rows="6"
-        ng-model="variables.value"
-        name="variablesName"
+        ng-model="variables"
+        name="{{ vm.name }}_variables"
         class="form-control Form-textArea"
-        id="{{ vm.name }}">
+        id="{{ vm.name }}_variables">
     </textarea>
     <at-code-mirror-modal
-        name="{{ vm.modalName }}"
+        name="{{ vm.name }}"
         ng-if="vm.expanded"
-        variables="variables"
+        modal-vars="variables"
         tooltip="{{ tooltip || vm.strings.get('code_mirror.tooltip.TOOLTIP') }}"
         label="{{ label || vm.strings.get('code_mirror.label.VARIABLES') }}"
         disabled="{{ disabled || false }}"
-        close-fn="vm.close()">
+        close-fn="vm.close">
     </at-code-mirror-modal>
 </div>
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 de6029f6c9..4eb77d6e0a 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,7 +1,7 @@
 const templateUrl = require('~components/code-mirror/modal/code-mirror-modal.partial.html');
 
 const CodeMirrorModalID = '#CodeMirror-modal';
-const ParseVariable = 'parseType';
+// const ParseVariable = 'parseType';
 const ParseType = 'yaml';
 const ModalHeight = '#CodeMirror-modal .modal-dialog';
 const ModalHeader = '.atCodeMirror-label';
@@ -10,8 +10,7 @@ const ModalFooter = '.CodeMirror-modalControls';
 function atCodeMirrorModalController (
     $scope,
     strings,
-    ParseTypeChange,
-    // ParseVariableString
+    ParseTypeChange
 ) {
     const vm = this;
     const variablesName = `${$scope.name}_variables`;
@@ -28,28 +27,25 @@ function atCodeMirrorModalController (
     }
 
     function toggle () {
-        $scope.parseTypeChange('parseType', variablesName);
+        $scope.parseTypeChange('parseType', 'modalVars');
         setTimeout(resize, 0);
     }
 
-    function init (vars, name) {
+    function init () {
         if ($scope.disabled === 'true') {
             $scope.disabled = true;
         } else if ($scope.disabled === 'false') {
             $scope.disabled = false;
         }
         $(CodeMirrorModalID).modal('show');
-        // $scope[variablesName] = ParseVariableString(_.cloneDeep(vars));
         $scope.parseType = ParseType;
-        $scope.value = $scope.variables.value;
-        const options = {
+        ParseTypeChange({
             scope: $scope,
-            variable: 'value', // variablesName,
-            parse_variable: ParseVariable,
-            field_id: name,
+            variable: 'modalVars',
+            parse_variable: 'parseType',
+            field_id: 'variables_modal',
             readOnly: $scope.disabled
-        };
-        ParseTypeChange(options);
+        });
         resize();
         $(CodeMirrorModalID).on('hidden.bs.modal', $scope.closeFn);
         $(`${CodeMirrorModalID} .modal-dialog`).resizable({
@@ -57,15 +53,14 @@ function atCodeMirrorModalController (
             minWidth: 600
         });
         $(`${CodeMirrorModalID} .modal-dialog`).on('resize', resize);
+
+        $scope.foovars = 'testing';
     }
 
-    vm.variablesName = variablesName;
-    vm.name = $scope.name;
     vm.strings = strings;
     vm.toggle = toggle;
     $scope.close = () => {
-        $scope.variables.value = $scope.value;
-        $scope.closeFn();
+        $scope.closeFn()($scope.modalVars);
     };
     if ($scope.init) {
         $scope.init = init;
@@ -79,7 +74,6 @@ atCodeMirrorModalController.$inject = [
     '$scope',
     'CodeMirrorStrings',
     'ParseTypeChange',
-    'ParseVariableString',
 ];
 
 function atCodeMirrorModal () {
@@ -95,7 +89,7 @@ function atCodeMirrorModal () {
             label: '@',
             labelClass: '@',
             tooltip: '@',
-            variables: '=',
+            modalVars: '=',
             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 57ca4a07be..662565f3f3 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
@@ -53,15 +53,12 @@
                 </div>
             </div>
             <div class="modal-body">
-                {{extra_variables}}
-                :
-                {{variables.value}}
                 <textarea
                     ng-disabled="disabled"
-                    ng-model="extra_variables"
+                    ng-model="modalVars"
                     name="extra_variables"
                     class="form-control Form-textArea"
-                    id="{{ vm.name }}">
+                    id="variables_modal">
                 </textarea>
             </div>
             <div class="modal-footer">
diff --git a/awx/ui/client/src/inventories-hosts/inventories/standard-inventory/inventory.form.js b/awx/ui/client/src/inventories-hosts/inventories/standard-inventory/inventory.form.js
index 87011f936c..b49e6e70d6 100644
--- a/awx/ui/client/src/inventories-hosts/inventories/standard-inventory/inventory.form.js
+++ b/awx/ui/client/src/inventories-hosts/inventories/standard-inventory/inventory.form.js
@@ -81,6 +81,7 @@ function(i18n) {
             // },
             inventory_variables: {
                 realName: 'variables',
+                root: 'inventory',
                 label: i18n._('Variables'),
                 type: 'code_mirror',
                 class: 'Form-formGroup--fullWidth',
diff --git a/awx/ui/client/src/shared/form-generator.js b/awx/ui/client/src/shared/form-generator.js
index 108c7c3930..1e8440d0ad 100644
--- a/awx/ui/client/src/shared/form-generator.js
+++ b/awx/ui/client/src/shared/form-generator.js
@@ -1370,8 +1370,8 @@ angular.module('FormGenerator', [GeneratorHelpers.name, 'Utilities', listGenerat
                         html += `class="${field.class}" `;
                         html += `label="${field.label}" `;
                         html += `tooltip="${field.awPopOver}" `;
-                        html += `name="${field.realName}" `;
-                        html += `variables="{{ ${field.variables} }}" `;
+                        html += `name="${field.root}" `;
+                        html += `variables="${field.variables}" `;
                         html += '></at-code-mirror>';
                     }