diff --git a/src/Umbraco.Web.UI.Client/src/views/documenttype/dialogs/compositions/compositions.html b/src/Umbraco.Web.UI.Client/src/views/documenttype/dialogs/compositions/compositions.html
index a0565712e6..90b2a00853 100644
--- a/src/Umbraco.Web.UI.Client/src/views/documenttype/dialogs/compositions/compositions.html
+++ b/src/Umbraco.Web.UI.Client/src/views/documenttype/dialogs/compositions/compositions.html
@@ -1,13 +1,14 @@
 <div ng-controller="Umbraco.Editors.DocumentType.CompositionsController">
     <div class="umb-overlay-body">
+
         <form>
             <div ng-repeat="compositeContentType in model.availableCompositeContentTypes">
-                
-                <label class="checkbox"> 
-                	<input type="checkbox" 
-                		ng-model="compositeContentType.isSelected" 
-                		ng-change="model.selectCompositeContentType(compositeContentType)" /> 
-                		<i class="{{ compositeContentType.icon }}"></i> {{ compositeContentType.name }}</label>
+                <label class="checkbox">
+                	<input type="checkbox"
+                           checklist-model="model.compositeContentTypes"
+                           checklist-value="compositeContentType.alias"
+                           ng-change="model.selectCompositeContentType(compositeContentType)" />
+                    <i class="{{ compositeContentType.icon }}"></i> {{ compositeContentType.name }}</label>
             </div>
         </form>
     </div>
diff --git a/src/Umbraco.Web.UI.Client/src/views/documenttype/edit.controller.js b/src/Umbraco.Web.UI.Client/src/views/documenttype/edit.controller.js
index 9ac213ce13..ffafde158e 100644
--- a/src/Umbraco.Web.UI.Client/src/views/documenttype/edit.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/views/documenttype/edit.controller.js
@@ -90,6 +90,7 @@ function DocumentTypeEditController($scope, $rootScope, $routeParams, $log, cont
 		$scope.dialogModel = {};
 		$scope.dialogModel.title = "Compositions";
 		$scope.dialogModel.availableCompositeContentTypes = $scope.contentType.availableCompositeContentTypes;
+		$scope.dialogModel.compositeContentTypes = $scope.contentType.compositeContentTypes;
 		$scope.dialogModel.view = "views/documentType/dialogs/compositions/compositions.html";
 		$scope.showDialog = true;
 
@@ -104,99 +105,95 @@ function DocumentTypeEditController($scope, $rootScope, $routeParams, $log, cont
 
 				compositeContentType.contentType = contentType;
 
-				switch (compositeContentType.isSelected) {
+				//merge composition with content type
+				if( $scope.contentType.compositeContentTypes.indexOf(compositeContentType.alias) !== -1 ) {
 
-					case true:
+					var groupsArrayLength = $scope.contentType.groups.length;
+					var positionToPush = groupsArrayLength - 1;
 
-						var groupsArrayLength = $scope.contentType.groups.length;
-						var positionToPush = groupsArrayLength - 1;
+					angular.forEach(compositeContentType.contentType.groups, function(compositionGroup){
 
-						angular.forEach(compositeContentType.contentType.groups, function(compositionGroup){
-
-							// set inherited state on tab
-							compositionGroup.inherited = true;
-							compositionGroup.contentTypeId = compositeContentType.id;
-							compositionGroup.contentTypeName = compositeContentType.name;
-
-							// set inherited state on properties
-							angular.forEach(compositionGroup.properties, function(property){
-								property.inherited = true;
-								property.contentTypeId = compositeContentType.id;
-								property.contentTypeName = compositeContentType.name;
-							});
-
-							// set tab state
-							compositionGroup.tabState = "inActive";
-
-							// if groups are named the same - merge the groups
-							angular.forEach($scope.contentType.groups, function(contentTypeGroup){
-
-								if( contentTypeGroup.name === compositionGroup.name ) {
-
-									// set flag to show if properties has been merged into a tab
-									compositionGroup.groupIsMerged = true;
-
-									// add properties to the top of the array
-									contentTypeGroup.properties = compositionGroup.properties.concat(contentTypeGroup.properties);
-
-								}
-
-							});
-
-							// if group is not merged - push it to the end of the array - before init tab
-							if( compositionGroup.groupIsMerged === false || compositionGroup.groupIsMerged == undefined ) {
-								$scope.contentType.groups.splice(positionToPush,0,compositionGroup);
-							}
+						// set inherited state on tab
+						compositionGroup.inherited = true;
+						compositionGroup.contentTypeId = compositeContentType.id;
+						compositionGroup.contentTypeName = compositeContentType.name;
 
+						// set inherited state on properties
+						angular.forEach(compositionGroup.properties, function(property){
+							property.inherited = true;
+							property.contentTypeId = compositeContentType.id;
+							property.contentTypeName = compositeContentType.name;
 						});
 
-						break;
-
-					case false:
-
-						var newGroupsArray = [];
+						// set tab state
+						compositionGroup.tabState = "inActive";
 
+						// if groups are named the same - merge the groups
 						angular.forEach($scope.contentType.groups, function(contentTypeGroup){
 
-							// remove inherited tabs
-							if( contentTypeGroup.contentTypeId === compositeContentType.id ) {
+							if( contentTypeGroup.name === compositionGroup.name ) {
 
-								var newProperties = false;
+								// set flag to show if properties has been merged into a tab
+								compositionGroup.groupIsMerged = true;
 
-								// check if group contains properties that are not inherited
-								angular.forEach(contentTypeGroup.properties, function(property){
-									if(property.inherited === false) {
-										newProperties = true;
-									}
-								});
-
-								// if new properties keep tab in array
-								if(newProperties) {
-									newGroupsArray.push(contentTypeGroup);
-								}
-
-							// remove inherited properties in merged tabs
-							} else {
-
-								var newPropertiesArray = [];
-
-								// create new array of properties which are not inherited
-								angular.forEach(contentTypeGroup.properties, function(property){
-									if(property.contentTypeId !== compositeContentType.id) {
-										newPropertiesArray.push(property);
-									}
-								});
-
-								contentTypeGroup.properties = newPropertiesArray;
-								newGroupsArray.push(contentTypeGroup);
+								// add properties to the top of the array
+								contentTypeGroup.properties = compositionGroup.properties.concat(contentTypeGroup.properties);
 
 							}
 
 						});
 
-						$scope.contentType.groups = newGroupsArray;
+						// if group is not merged - push it to the end of the array - before init tab
+						if( compositionGroup.groupIsMerged === false || compositionGroup.groupIsMerged == undefined ) {
+							$scope.contentType.groups.splice(positionToPush,0,compositionGroup);
+						}
 
-						break;
+					});
+
+				// split composition from content type
+				} else {
+
+					var newGroupsArray = [];
+
+					angular.forEach($scope.contentType.groups, function(contentTypeGroup){
+
+						// remove inherited tabs
+						if( contentTypeGroup.contentTypeId === compositeContentType.id ) {
+
+							var newProperties = false;
+
+							// check if group contains properties that are not inherited
+							angular.forEach(contentTypeGroup.properties, function(property){
+								if(property.inherited === false) {
+									newProperties = true;
+								}
+							});
+
+							// if new properties keep tab in array
+							if(newProperties) {
+								newGroupsArray.push(contentTypeGroup);
+							}
+
+							// remove inherited properties in merged tabs
+						} else {
+
+							var newPropertiesArray = [];
+
+							// create new array of properties which are not inherited
+							angular.forEach(contentTypeGroup.properties, function(property){
+								if(property.contentTypeId !== compositeContentType.id) {
+									newPropertiesArray.push(property);
+								}
+							});
+
+							contentTypeGroup.properties = newPropertiesArray;
+							newGroupsArray.push(contentTypeGroup);
+
+						}
+
+					});
+
+					$scope.contentType.groups = newGroupsArray;
 				}
 
 			});