diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/content/edit.controller.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/content/edit.controller.js
index 4a3afec5a7..83adc49091 100644
--- a/src/Umbraco.Web.UI.Client/src/common/directives/components/content/edit.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/content/edit.controller.js
@@ -31,7 +31,7 @@
         $scope.page.hideActionsMenu = infiniteMode ? true : false;
         $scope.page.hideChangeVariant = false;
         $scope.allowOpen = true;
-        $scope.app = null;
+        $scope.activeApp = null;
 
         //initializes any watches
         function startWatches(content) {
@@ -74,11 +74,11 @@
             var isAppPresent = false;
 
             // on first init, we dont have any apps. but if we are re-initializing, we do, but ...
-            if ($scope.app) {
+            if ($scope.activeApp) {
 
                 // lets check if it still exists as part of our apps array. (if not we have made a change to our docType, even just a re-save of the docType it will turn into new Apps.)
                 _.forEach(content.apps, function (app) {
-                    if (app === $scope.app) {
+                    if (app.alias === $scope.activeApp.alias) {
                         isAppPresent = true;
                     }
                 });
@@ -86,9 +86,8 @@
                 // if we did reload our DocType, but still have the same app we will try to find it by the alias.
                 if (isAppPresent === false) {
                     _.forEach(content.apps, function (app) {
-                        if (app.alias === $scope.app.alias) {
+                        if (app.alias === $scope.activeApp.alias) {
                             isAppPresent = true;
-                            app.active = true;
                             $scope.appChanged(app);
                         }
                     });
@@ -98,7 +97,6 @@
 
             // if we still dont have a app, lets show the first one:
             if (isAppPresent === false && content.apps.length) {
-                content.apps[0].active = true;
                 $scope.appChanged(content.apps[0]);
             }
             // otherwise make sure the save options are up to date with the current content state
@@ -274,7 +272,7 @@
             $scope.page.saveButtonStyle = content.trashed || content.isElement || content.isBlueprint ? "primary" : "info";
             // only create the save/publish/preview buttons if the
             // content app is "Conent"
-            if ($scope.app && $scope.app.alias !== "umbContent" && $scope.app.alias !== "umbInfo" && $scope.app.alias !== "umbListView") {
+            if ($scope.activeApp && $scope.activeApp.alias !== "umbContent" && $scope.activeApp.alias !== "umbInfo" && $scope.activeApp.alias !== "umbListView") {
                 $scope.defaultButton = null;
                 $scope.subButtons = null;
                 $scope.page.showSaveButton = false;
@@ -961,11 +959,18 @@
          * Call back when a content app changes
          * @param {any} app
          */
-        $scope.appChanged = function (app) {
+        $scope.appChanged = function (activeApp) {
 
-            $scope.app = app;
+            $scope.activeApp = activeApp;
+            
+            _.forEach($scope.content.apps, function (app) {
+                app.active = false;
+                if (app.alias === $scope.activeApp.alias) {
+                    app.active = true;
+                }
+            });
 
-            $scope.$broadcast("editors.apps.appChanged", { app: app });
+            $scope.$broadcast("editors.apps.appChanged", { app: activeApp });
 
             createButtons($scope.content);
 
diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/content/umbvariantcontent.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/content/umbvariantcontent.directive.js
index 15e3dc02ba..764ae344dd 100644
--- a/src/Umbraco.Web.UI.Client/src/common/directives/components/content/umbvariantcontent.directive.js
+++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/content/umbvariantcontent.directive.js
@@ -41,15 +41,14 @@
         vm.showBackButton = showBackButton;
 
         function onInit() {
-            // disable the name field if the active content app is not "Content"
-            vm.nameDisabled = false;
-            angular.forEach(vm.content.apps, function(app){
-                if(app.active && app.alias !== "umbContent" && app.alias !== "umbInfo" && app.alias !== "umbListView") {
-                    vm.nameDisabled = true;
-                }
-            });
-            console.log("what do we have on vm.editor.variantApps", vm.editor.variantApps)
+            
+            // Make copy of apps, so we can have a variant specific model for the App. (needed for validation etc.)
             vm.editor.variantApps = angular.copy(vm.content.apps);
+
+            var activeApp = vm.content.apps.find((app) => app.active);
+
+            onAppChanged(activeApp);
+
         }
         
         function showBackButton() {
@@ -95,14 +94,23 @@
         }
         
         $scope.$on("editors.apps.appChanged", function($event, $args) {
-            var app = $args.app;
-            // disable the name field if the active content app is not "Content" or "Info"
-            vm.nameDisabled = false;
-            if(app && app.alias !== "umbContent" && app.alias !== "umbInfo" && app.alias !== "umbListView") {
-                vm.nameDisabled = true;
-            }
+            var activeApp = $args.app;
+
+            // sync varaintApps active with new active.
+            _.forEach(vm.editor.variantApps, function (app) {
+                app.active = (app.alias === activeApp.alias);
+            });
+
+            onAppChanged(activeApp);
         });
 
+        function onAppChanged(activeApp) {
+
+            // disable the name field if the active content app is not "Content" or "Info"
+            vm.nameDisabled = (activeApp && activeApp.alias !== "umbContent" && activeApp.alias !== "umbInfo" && activeApp.alias !== "umbListView");
+
+        }
+
         /**
          * Used to proxy a callback
          * @param {any} item