diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/forms/umbcheckbox.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/forms/umbcheckbox.directive.js
index 5bf94bc5ca..9b59d9b81f 100644
--- a/src/Umbraco.Web.UI.Client/src/common/directives/components/forms/umbcheckbox.directive.js
+++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/forms/umbcheckbox.directive.js
@@ -22,9 +22,11 @@
 </pre>
 
 @param {boolean} model Set to <code>true</code> or <code>false</code> to set the checkbox to checked or unchecked.
+@param {string} id Set the id of the checkbox.
 @param {string} value Set the value of the checkbox.
 @param {string} name Set the name of the checkbox.
 @param {string} text Set the text for the checkbox label.
+@param {string} serverValidationField Set the val-server-field of the checkbox.
 @param {boolean} disabled Set the checkbox to be disabled.
 @param {boolean} required Set the checkbox to be required.
 @param {string} onChange Callback when the value of the input element changes.
@@ -33,40 +35,38 @@
 
 (function () {
     'use strict';
-
-    function CheckboxDirective() {
+    
+    
+    function UmbCheckboxController($timeout) {
         
-        function link(scope, el, attr, ctrl) {
-            
-            scope.callOnChange = function() {
-                scope.onChange({model:scope.model, value:scope.value});
-            }
-            
+        var vm = this;
+        
+        vm.callOnChange = function() {
+            $timeout(function(){
+                vm.onChange({model:vm.model, value:vm.value});
+            }, 0, false);
         }
-
         
-        var directive = {
-            restrict: 'E',
-            replace: true,
-            templateUrl: 'views/components/forms/umb-checkbox.html',
-            scope: {
-                model: "=",
-                id: "@",
-                value: "@",
-                name: "@",
-                text: "@",
-                serverValidationField: "@",
-                disabled: "=",
-                required: "=",
-                onChange: "&"
-            },
-            link: link
-        };
-
-        return directive;
-
     }
+    
+    
+    var component = {
+        templateUrl: 'views/components/forms/umb-checkbox.html',
+        controller: UmbCheckboxController,
+        controllerAs: 'vm',
+        bindings: {
+            model: "=",
+            id: "@",
+            value: "@",
+            name: "@",
+            text: "@",
+            serverValidationField: "@",
+            disabled: "<",
+            required: "<",
+            onChange: "&"
+        }
+    };
 
-    angular.module('umbraco.directives').directive('umbCheckbox', CheckboxDirective);
+    angular.module('umbraco.directives').component('umbCheckbox', component);
 
 })();
diff --git a/src/Umbraco.Web.UI.Client/src/views/components/forms/umb-checkbox.html b/src/Umbraco.Web.UI.Client/src/views/components/forms/umb-checkbox.html
index 0b90a62e0b..4de97b7856 100644
--- a/src/Umbraco.Web.UI.Client/src/views/components/forms/umb-checkbox.html
+++ b/src/Umbraco.Web.UI.Client/src/views/components/forms/umb-checkbox.html
@@ -1,16 +1,19 @@
 <label class="checkbox umb-form-check umb-form-check--checkbox" ng-class="{ 'umb-form-check--disabled': disabled }">
-    <input type="checkbox" name="{{name}}"
-           value="{{value}}"
+    <input type="checkbox"
+           id="{{vm.id}}"
+           name="{{vm.name}}"
+           value="{{vm.value}}"
            class="umb-form-check__input"
-           ng-model="model"
-           ng-disabled="disabled"
-           ng-required="required"
-           ng-change="callOnChange()"/>
+           val-server-field="{{vm.serverValidationField}}"
+           ng-model="vm.model"
+           ng-disabled="vm.disabled"
+           ng-required="vm.required"
+           ng-change="vm.callOnChange()"/>
 
     <span class="umb-form-check__state" aria-hidden="true">
         <span class="umb-form-check__check">
             <i class="umb-form-check__icon icon-check"></i>
         </span>
     </span>
-    <span class="umb-form-check__text">{{text}}</span>
+    <span class="umb-form-check__text">{{vm.text}}</span>
 </label>