diff --git a/awx/ui/client/src/templates/main.js b/awx/ui/client/src/templates/main.js
index d18b1e5fc2..df92821c7f 100644
--- a/awx/ui/client/src/templates/main.js
+++ b/awx/ui/client/src/templates/main.js
@@ -112,7 +112,7 @@ angular.module('templates', [surveyMaker.name, templatesList.name, jobTemplatesA
                     },
                     views: {
                         'modal': {
-                            template: ` <workflow-maker ng-if="includeWorkflowMaker" tree-data="workflowTree" can-add-workflow-job-template="canAddWorkflowJobTemplate"></workflow-maker>`
+                            template: `<workflow-maker ng-if="includeWorkflowMaker" workflow-job-template-obj="workflow_job_template_obj" can-add-workflow-job-template="canAddWorkflowJobTemplate"></workflow-maker>`
                         },
                         'jobTemplateList@templates.editWorkflowJobTemplate.workflowMaker': {
                             templateProvider: function(WorkflowMakerJobTemplateList, generateList) {
diff --git a/awx/ui/client/src/templates/workflows/edit-workflow/workflow-edit.controller.js b/awx/ui/client/src/templates/workflows/edit-workflow/workflow-edit.controller.js
index 93ea82d27d..c0cbeb417d 100644
--- a/awx/ui/client/src/templates/workflows/edit-workflow/workflow-edit.controller.js
+++ b/awx/ui/client/src/templates/workflows/edit-workflow/workflow-edit.controller.js
@@ -149,54 +149,7 @@
                 $scope.url = workflowJobTemplateData.url;
                 $scope.survey_enabled = workflowJobTemplateData.survey_enabled;
 
-                let allNodes = [];
-                let page = 1;
-
-                let buildTreeFromNodes = function(){
-                    $scope.workflowTree = WorkflowService.buildTree({
-                        workflowNodes: allNodes
-                    });
-
-                    // TODO: I think that the workflow chart directive (and eventually d3) is meddling with
-                    // this workflowTree object and removing the children object for some reason (?)
-                    // This happens on occasion and I think is a race condition (?)
-                    if(!$scope.workflowTree.data.children) {
-                        $scope.workflowTree.data.children = [];
-                    }
-
-                    $scope.workflowTree.workflow_job_template_obj = $scope.workflow_job_template_obj;
-
-                    // In the partial, the workflow maker directive has an ng-if attribute which is pointed at this scope variable.
-                    // It won't get included until this the tree has been built - I'm open to better ways of doing this.
-                    $scope.includeWorkflowMaker = true;
-                };
-
-                let getNodes = function(){
-                    // Get the workflow nodes
-                    TemplatesService.getWorkflowJobTemplateNodes(id, page)
-                    .then(function(data){
-                        for(var i=0; i<data.data.results.length; i++) {
-                            allNodes.push(data.data.results[i]);
-                        }
-                        if(data.data.next) {
-                            // Get the next page
-                            page++;
-                            getNodes();
-                        }
-                        else {
-                            // This is the last page
-                            buildTreeFromNodes();
-                        }
-                    }, function(error){
-                        ProcessErrors($scope, error.data, error.status, form, {
-                            hdr: 'Error!',
-                            msg: 'Failed to get workflow job template nodes. GET returned ' +
-                            'status: ' + error.status
-                        });
-                    });
-                };
-
-                getNodes();
+                $scope.includeWorkflowMaker = true;
 
             }, function(error){
                 ProcessErrors($scope, error.data, error.status, form, {
diff --git a/awx/ui/client/src/templates/workflows/edit-workflow/workflow-edit.partial.html b/awx/ui/client/src/templates/workflows/edit-workflow/workflow-edit.partial.html
index 2bd7f4500a..6fc849c989 100644
--- a/awx/ui/client/src/templates/workflows/edit-workflow/workflow-edit.partial.html
+++ b/awx/ui/client/src/templates/workflows/edit-workflow/workflow-edit.partial.html
@@ -1,5 +1,4 @@
 <div class="tab-pane" id="workflow_edit">
     <div ui-view></div>
     <div ng-cloak id="htmlTemplate" class="Panel"></div>
-    <workflow-maker ng-if="includeWorkflowMaker" tree-data="workflowTree"></workflow-maker>
 </div>
diff --git a/awx/ui/client/src/templates/workflows/workflow-chart/workflow-chart.directive.js b/awx/ui/client/src/templates/workflows/workflow-chart/workflow-chart.directive.js
index 5a2f0c80cc..0f0b9e1f58 100644
--- a/awx/ui/client/src/templates/workflows/workflow-chart/workflow-chart.directive.js
+++ b/awx/ui/client/src/templates/workflows/workflow-chart/workflow-chart.directive.js
@@ -779,11 +779,15 @@ export default [ '$state','moment',
 
             scope.$watch('canAddWorkflowJobTemplate', function() {
                 // Redraw the graph if permissions change
-                update();
+                if(scope.treeData) {
+                    update();
+                }
             });
 
-            scope.$on('refreshWorkflowChart', function(){
-                update();
+            scope.$on('refreshWorkflowChart', function(){console.log(scope.treeData);
+                if(scope.treeData) {
+                    update();
+                }
             });
 
             scope.$on('panWorkflowChart', function(evt, params) {
@@ -798,6 +802,13 @@ export default [ '$state','moment',
                 manualZoom(params.zoom);
             });
 
+            let clearWatchTreeData = scope.$watch('treeData', function(newVal) {
+                if(newVal) {
+                    update();
+                    clearWatchTreeData();
+                }
+            });
+
         }
     };
 }];
diff --git a/awx/ui/client/src/templates/workflows/workflow-maker/workflow-maker.block.less b/awx/ui/client/src/templates/workflows/workflow-maker/workflow-maker.block.less
index 4fd54ad08f..aa61efa0b7 100644
--- a/awx/ui/client/src/templates/workflows/workflow-maker/workflow-maker.block.less
+++ b/awx/ui/client/src/templates/workflows/workflow-maker/workflow-maker.block.less
@@ -154,7 +154,7 @@
     padding-left: 20px;
 }
 .WorkflowLegend-maker--right {
-    flex: 0 0 206px;
+    flex: 0 0 215px;
     text-align: right;
     padding-right: 20px;
     position: relative;
@@ -226,7 +226,7 @@
 }
 .WorkflowMaker-manualControls {
     position: absolute;
-    left: -86px;
+    left: -77px;
     height: 60px;
     width: 293px;
     background-color: @default-bg;
diff --git a/awx/ui/client/src/templates/workflows/workflow-maker/workflow-maker.controller.js b/awx/ui/client/src/templates/workflows/workflow-maker/workflow-maker.controller.js
index 368effdaaf..63c36bca39 100644
--- a/awx/ui/client/src/templates/workflows/workflow-maker/workflow-maker.controller.js
+++ b/awx/ui/client/src/templates/workflows/workflow-maker/workflow-maker.controller.js
@@ -40,9 +40,56 @@ export default ['$scope', 'WorkflowService', 'generateList', 'TemplateList', 'Pr
          $scope.disassociateRequests = [];
 
         function init() {
-            $scope.treeDataMaster = angular.copy($scope.treeData.data);
-            $scope.showManualControls = false;
-            $scope.$broadcast("refreshWorkflowChart");
+
+            let allNodes = [];
+            let page = 1;
+
+            let buildTreeFromNodes = function(){
+                WorkflowService.buildTree({
+                    workflowNodes: allNodes
+                }).then(function(data){
+                    $scope.treeData = data;
+
+                    // TODO: I think that the workflow chart directive (and eventually d3) is meddling with
+                    // this treeData object and removing the children object for some reason (?)
+                    // This happens on occasion and I think is a race condition (?)
+                    if(!$scope.treeData.data.children) {
+                        $scope.treeData.data.children = [];
+                    }
+
+                    $scope.treeData.workflow_job_template_obj = $scope.workflowJobTemplateObj;
+
+                    $scope.treeDataMaster = angular.copy($scope.treeData.data);
+                    $scope.showManualControls = false;
+                });
+            };
+
+            let getNodes = function(){
+                // Get the workflow nodes
+                TemplatesService.getWorkflowJobTemplateNodes($scope.workflowJobTemplateObj.id, page)
+                .then(function(data){
+                    for(var i=0; i<data.data.results.length; i++) {
+                        allNodes.push(data.data.results[i]);
+                    }
+                    if(data.data.next) {
+                        // Get the next page
+                        page++;
+                        getNodes();
+                    }
+                    else {
+                        // This is the last page
+                        buildTreeFromNodes();
+                    }
+                }, function(error){
+                    ProcessErrors($scope, error.data, error.status, form, {
+                        hdr: 'Error!',
+                        msg: 'Failed to get workflow job template nodes. GET returned ' +
+                        'status: ' + error.status
+                    });
+                });
+            };
+
+            getNodes();
         }
 
         function resetNodeForm() {
@@ -155,6 +202,7 @@ export default ['$scope', 'WorkflowService', 'generateList', 'TemplateList', 'Pr
                     data: buildSendableNodeData()
                 })
                 .then(function(data) {
+                    params.node.isNew = false;
                     continueRecursing(data.data.id);
                 }, function(error) {
                     ProcessErrors($scope, error.data, error.status, form, {
diff --git a/awx/ui/client/src/templates/workflows/workflow-maker/workflow-maker.directive.js b/awx/ui/client/src/templates/workflows/workflow-maker/workflow-maker.directive.js
index cccc4f638e..54c1e526fd 100644
--- a/awx/ui/client/src/templates/workflows/workflow-maker/workflow-maker.directive.js
+++ b/awx/ui/client/src/templates/workflows/workflow-maker/workflow-maker.directive.js
@@ -10,7 +10,7 @@ export default ['templateUrl', 'CreateDialog', 'Wait', '$state',
     function(templateUrl, CreateDialog, Wait, $state) {
         return {
             scope: {
-                treeData: '=',
+                workflowJobTemplateObj: '=',
                 canAddWorkflowJobTemplate: '='
             },
             restrict: 'E',
diff --git a/awx/ui/client/src/templates/workflows/workflow.service.js b/awx/ui/client/src/templates/workflows/workflow.service.js
index 7a6037f867..a83b7ef3da 100644
--- a/awx/ui/client/src/templates/workflows/workflow.service.js
+++ b/awx/ui/client/src/templates/workflows/workflow.service.js
@@ -1,4 +1,4 @@
-export default [function(){
+export default ['$q', function($q){
     return {
         searchTree: function(params) {
             // params.element
@@ -129,6 +129,8 @@ export default [function(){
         buildTree: function(params) {
             //params.workflowNodes
 
+            let deferred = $q.defer();
+
             let _this = this;
 
             let treeData = {
@@ -185,7 +187,9 @@ export default [function(){
                 treeData.data.children.push(branch);
             });
 
-            return treeData;
+            deferred.resolve(treeData);
+
+            return deferred.promise;
         },
         buildBranch: function(params) {
             // params.nodeId