diff --git a/demo/app.js b/demo/app.js
index 727c819c..b3cc933d 100644
--- a/demo/app.js
+++ b/demo/app.js
@@ -26,7 +26,8 @@ app.config(function($stateProvider, $urlRouterProvider, $locationProvider, forml
 		// or
 		formlyConfigProvider.setTemplateUrl({
 			radio: 'views/custom-field-radio.html',
-			checkbox: 'views/custom-field-checkbox.html'
+			checkbox: 'views/custom-field-checkbox.html',
+            buttongroup: 'views/custom-field-buttongroup.html'
 		});
 	}
 
diff --git a/demo/main.css b/demo/main.css
index f6df11ce..402407d6 100644
--- a/demo/main.css
+++ b/demo/main.css
@@ -9,4 +9,4 @@
 .footer {
 	text-align: center;
 	padding: 25px;
-}
\ No newline at end of file
+}
diff --git a/demo/views/custom-field-buttongroup.html b/demo/views/custom-field-buttongroup.html
new file mode 100644
index 00000000..6aadadb3
--- /dev/null
+++ b/demo/views/custom-field-buttongroup.html
@@ -0,0 +1,19 @@
+<div class="btn-group" data-toggle="{{options.selectType==='multiple' ? 'buttons-checkbox' : 'buttons-radio'}}"
+     ng-required="options.required">
+    Custom field of type "buttongroup"
+    <label class="control-label">
+        {{options.label}}
+        {{options.required ? '*' : ''}}
+    </label>
+    <br>
+    <button type="button"
+            class="btn btn-primary {{$parent.result[$parent.options.key].indexOf((options.valueDelimiter || '|') + option.value + (options.valueDelimiter || '|') ) > -1 ? 'active' : ''}}"
+            name="{{id}}"
+            id="{{id + '_'+ $index}}"
+            ng-value="option.value"
+            ng-model="$parent.result[$parent.options.key || $parent.index]"
+            ng-click="$parent.result[$parent.options.key] = options.selectType==='single' ? (options.valueDelimiter || '|') + option.value + (options.valueDelimiter || '|') : ($parent.result[$parent.options.key].indexOf(option.value) > -1 ? $parent.result[$parent.options.key].replace((options.valueDelimiter || '|') + option.value + (options.valueDelimiter || '|'), '') : $parent.result[$parent.options.key] + (options.valueDelimiter || '|') + option.value + (options.valueDelimiter || '|'))"
+            ng-repeat="(key, option) in options.options">
+        {{option.name}}
+    </button>
+</div>
\ No newline at end of file
diff --git a/demo/views/home.js b/demo/views/home.js
index 372def53..43c25c2c 100644
--- a/demo/views/home.js
+++ b/demo/views/home.js
@@ -50,7 +50,7 @@ app.controller('home', function($scope, $parse, $window, usingCustomTypeTemplate
 			$scope.formFieldsError = true;
 		}
 	});
-	$scope.$watch('formDataStr', function onDataUpdated(newValue) {
+    $scope.$watch('formDataStr', function onDataUpdated(newValue) {
 		try {
 			$scope.formData = $parse(newValue)({});
 			$scope.formDataError = false;
@@ -59,6 +59,16 @@ app.controller('home', function($scope, $parse, $window, usingCustomTypeTemplate
 		}
 	});
 
+	$scope.$watch('editJSON', function onDataObjectUpdated(newValue) {
+		try {
+			if(newValue == true) {
+				$scope.formDataStr = $scope.toPrettyJSON($scope.formData, 4);
+			}
+		} catch (e) {
+			$scope.formDataError = true;
+		}
+	});
+
 	// Public Vars
 	if (usingCustomTypeTemplates) {
 		$scope.typeTemplatesButton = 'Use Built-in Type Templates';
@@ -110,7 +120,59 @@ app.controller('home', function($scope, $parse, $window, usingCustomTypeTemplate
 				value: 'no'
 			}
 		]
-	}, {
+    }, {
+        "key": "multiSelectButtons",
+        "type": "buttongroup",
+        "selectType": "multiple",
+        "valueDelimiter": "|",
+        "label": "Is this thing on?",
+        "options": [
+            {
+                "name": "Sure",
+                "value": "sure"
+            },
+            {
+                "name": "Nope",
+                "value": "nope"
+            },
+            {
+                "name": "Why Not?",
+                "value": "whynot"
+            }
+        ]
+    }, {
+        "key": "singleToggle",
+        "type": "buttongroup",
+        "selectType": "multiple",
+        "valueDelimiter": "|",
+        "label": "Toggle me!",
+        "options": [
+            {
+                "name": "toggle",
+                "value": "active"
+            }
+        ]
+    }, {
+        "key": "singleSelectButtons",
+        "type": "buttongroup",
+        "selectType": "single",
+        "required": true,
+        "label": "Which one is best?",
+        "options": [
+            {
+                "name": "Apple",
+                "value": "apple"
+            },
+            {
+                "name": "Banana",
+                "value": "banana"
+            },
+            {
+                "name": "Peach",
+                "value": "peach"
+            }
+        ]
+    }, {
 		key: 'angularFan',
 		type: 'text',
 		label: 'Angular Fan?',