diff --git a/.editorconfig b/.editorconfig
new file mode 100644
index 0000000..04ba039
--- /dev/null
+++ b/.editorconfig
@@ -0,0 +1,20 @@
+# EditorConfig helps developers define and maintain consistent
+# coding styles between different editors and IDEs
+# editorconfig.org
+
+root = true
+
+[*]
+
+# Change these settings to your own preference
+indent_style = space
+indent_size = 2
+
+# We recommend you to keep these unchanged
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false
diff --git a/.jshintrc b/.jshintrc
index 701d222..15b0538 100644
--- a/.jshintrc
+++ b/.jshintrc
@@ -20,11 +20,10 @@
 	"noarg"    : true,
 	"noempty"  : true,
 	"nonew"    : true,
-	"quotmark" : "double",
 	"regexp"   : true,
 	"smarttabs": true,
 	"strict"   : true,
 	"trailing" : true,
 	"undef"    : true,
 	"unused"   : "vars"
-}
\ No newline at end of file
+}
diff --git a/Gruntfile.js b/Gruntfile.js
new file mode 100644
index 0000000..7aec975
--- /dev/null
+++ b/Gruntfile.js
@@ -0,0 +1,70 @@
+'use_strict';
+
+module.exports = function(grunt) {
+  grunt.initConfig({
+    pkg: grunt.file.readJSON('package.json'),
+    bump: {
+      options: {
+        files: ['package.json', 'bower.json'],
+        commit: false,
+        push: false,
+        commitMessage: 'Release v%VERSION%',
+        commitFiles: ['package.json', 'bower.json']
+      }
+    },
+    cssmin: {
+      style: {
+        files: {
+          'dist/ez-checkbox.min.css': ['dist/ez-checkbox.css']
+        }
+      }
+    },
+    jshint: {
+      options: {
+        jshintrc: '.jshintrc'
+      },
+      src: {
+        files: {
+          src: ['src/**/*.js', 'test/**/*.js']
+        },
+      }
+    },
+    less: {
+      dist: {
+        files: {
+          'dist/ez-checkbox.css': 'src/*.less'
+        }
+      }
+    },
+    uglify: {
+      options: {
+        mangle: true,
+        compile: true,
+        compress: true
+      },
+      dist: {
+        files: {
+          'dist/ez-checkbox.min.js': ['src/**/*.js']
+        }
+      }
+    },
+    watch: {
+      all: {
+        files: ['Gruntfile.js', 'src/*.js'],
+        tasks: ['default'],
+        options: {
+          livereload: 1676,
+        }
+      }
+    }
+  });
+
+  grunt.loadNpmTasks('grunt-contrib-jshint');
+  grunt.loadNpmTasks('grunt-contrib-uglify');
+  grunt.loadNpmTasks('grunt-contrib-watch');
+  grunt.loadNpmTasks('grunt-contrib-less');
+  grunt.loadNpmTasks('grunt-contrib-cssmin');
+  grunt.loadNpmTasks('grunt-bump');
+
+  grunt.registerTask('default', ['jshint', 'less', 'uglify', 'cssmin']);
+};
diff --git a/LICENSE b/LICENSE
index d6f187c..d713e44 100644
--- a/LICENSE
+++ b/LICENSE
@@ -1,6 +1,6 @@
 The MIT License (MIT)
 
-Copyright (c) 2014 Sebastian Hammerl, Getslash GmbH
+Copyright (c) 2014 Sebastian Hammerl, Getslash GmbH, Joris de Wit
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal
@@ -18,4 +18,4 @@ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
\ No newline at end of file
+SOFTWARE.
diff --git a/README.md b/README.md
index 442c8e1..b038047 100644
--- a/README.md
+++ b/README.md
@@ -1,79 +1,38 @@
-angular-bootstrap-checkbox
-==========================
+ez-checkbox
+===========
 
-A checkbox for AngularJS styled to fit the Twitter Bootstrap standard design
+A better checkbox for AngularJS.
 
-Screenshot:
-
-![Screenshot](/checkbox.png?raw=true "Screenshot")
-
-### Description:
-
-The standard checkboxes which use the input HTML element just don't look good in combination with Bootstrap.
-
-Surprisingly, I could not find any nice looking, simple checkbox, so I built one. It is based on a button and Glyphicons which behaves like a normal checkbox.
-
-The angular-bootstrap-checkbox is compatible to the use of the original AngularJS input[checkbox], with one minor change: while the original implementation allows an "uninitialized" or other then defined state of the model this one forces "false" or "ng-false-value" (not checked) when not set to "true" or "ng-true-value".
-
-### Installation via Bower:
-
-```
-$ bower install angular-bootstrap-checkbox --save
-```
-
-### Usage:
-
-Add "ui.checkbox" to your modules list. Then you can use it like AngularJS input[checkbox]:
-
-```
-<checkbox
-    ng-model="checkboxModel"
-    name="custom-name"              (Optional)
-    ng-true-value="The Truth"       (Optional)
-    ng-false-value="The Untruth"    (Optional)
-    ng-change="onChange()"          (Optional)
-></checkbox>
-```
-
-Additionally you can set the size:
+##Features
+- Inverse selection (show check on falsy value)
+- Non boolean true/false values
+- Easily transclude a clickable label
 
+##Installation
+- run `bower install ez-checkbox`
+- add `ez.checkbox` to your applications list of modules
+- add sources to your html
+```html
+	<link href="bower_components/ez-checkbox/dist/ez-checkbox.min.css" rel="stylesheet"/>
+	<script src="bower_components/ez-checkbox/dist/ez-checkbox.min.js"></script>
 ```
-<checkbox ...></checkbox>            (Normal size, corresponds to 'btn-xs')
-<checkbox large ...></checkbox>      (Large, corresponds to 'btn-sm')
-<checkbox larger ...></checkbox>     (Larger, corresponds to Button default size)
-<checkbox largest ...></checkbox>    (Largest, corresponds to 'btn-lg')
-```
-
-![Screenshot](/sizes.png?raw=true "Screenshot Sizes")
 
-And also style the checkboxes like Bootstrap buttons:
-
-```
-<checkbox class="btn-primary"></checkbox>    (Looks like primary button)
-<checkbox class="btn-success"></checkbox>    (Looks like success button)
-<checkbox class="btn-info"></checkbox>       (Looks like info button)
-<checkbox class="btn-warning"></checkbox>    (Looks like warning button)
-<checkbox class="btn-danger"></checkbox>     (Looks like danger button)
-```
+##Requirements
+Font Awesome.
 
-![Screenshot](/styles.png?raw=true "Screenshot Styles")
+##Demo
+See <a href="https://rawgit.com/jdewit/ez-checkbox/master/index.html">Live Demo</a>
 
-See index.html and app.js for examples and how it works.
-
-### Testing:
-
-Start web server e.g. via Python:
-```
-$ python -m SimpleHTTPServer 8000
-```
-
-Start Karma E2E tests (has to be installed globally before):
-```
-$ karma start
+##Usage
+```html
+<ez-checkbox ng-model="form.isCool">This is cool</ez-checkbox>
 ```
 
-### License
+##Options
+Add the following attributes to customize behaviour
 
-Copyright (c) 2014 Sebastian Hammerl, Getslash GmbH
+- `invert="true"` - Show check on false value instead of true
+- `true-value="this-is-cool"` - Will display check in checkbox if ng-model value === 'this-is-cool'
 
-Licensed under the MIT License
\ No newline at end of file
+##Acknowledgements
+Thanks to <a href="https://github.com/sebastianha/angular-bootstrap-checkbox">angular-bootstrap-checkbox</a>.
diff --git a/angular-bootstrap-checkbox.js b/angular-bootstrap-checkbox.js
deleted file mode 100644
index 0849d6d..0000000
--- a/angular-bootstrap-checkbox.js
+++ /dev/null
@@ -1,76 +0,0 @@
-"use strict";
-
-angular.module("ui.checkbox", []).directive("checkbox", function() {
-	return {
-		scope: {},
-		require: "ngModel",
-		restrict: "E",
-		replace: "true",
-		template: "<button type=\"button\" ng-style=\"stylebtn\" class=\"btn btn-default\" ng-class=\"{'btn-xs': size==='default', 'btn-sm': size==='large', 'btn-lg': size==='largest'}\">" +
-			"<span ng-style=\"styleicon\" class=\"glyphicon\" ng-class=\"{'glyphicon-ok': checked===true}\"></span>" +
-			"</button>",
-		link: function(scope, elem, attrs, modelCtrl) {
-			scope.size = "default";
-			// Default Button Styling
-			scope.stylebtn = {};
-			// Default Checkmark Styling
-			scope.styleicon = {"width": "10px", "left": "-1px"};
-			// If size is undefined, Checkbox has normal size (Bootstrap 'xs')
-			if(attrs.large !== undefined) {
-				scope.size = "large";
-				scope.stylebtn = {"padding-top": "2px", "padding-bottom": "2px", "height": "30px"};
-				scope.styleicon = {"width": "8px", "left": "-5px", "font-size": "17px"};
-			}
-			if(attrs.larger !== undefined) {
-				scope.size = "larger";
-				scope.stylebtn = {"padding-top": "2px", "padding-bottom": "2px", "height": "34px"};
-				scope.styleicon = {"width": "8px", "left": "-8px", "font-size": "22px"};
-			}
-			if(attrs.largest !== undefined) {
-				scope.size = "largest";
-				scope.stylebtn = {"padding-top": "2px", "padding-bottom": "2px", "height": "45px"};
-				scope.styleicon = {"width": "11px", "left": "-11px", "font-size": "30px"};
-			}
-
-			var trueValue = true;
-			var falseValue = false;
-
-			// If defined set true value
-			if(attrs.ngTrueValue !== undefined) {
-				trueValue = attrs.ngTrueValue;
-			}
-			// If defined set false value
-			if(attrs.ngFalseValue !== undefined) {
-				falseValue = attrs.ngFalseValue;
-			}
-
-			// Check if name attribute is set and if so add it to the DOM element
-			if(scope.name !== undefined) {
-				elem.name = scope.name;
-			}
-
-			// Update element when model changes
-			scope.$watch(function() {
-				if(modelCtrl.$modelValue === trueValue || modelCtrl.$modelValue === true) {
-					modelCtrl.$setViewValue(trueValue);
-				} else {
-					modelCtrl.$setViewValue(falseValue);
-				}
-				return modelCtrl.$modelValue;
-			}, function(newVal, oldVal) {
-				scope.checked = modelCtrl.$modelValue === trueValue;
-			}, true);
-
-			// On click swap value and trigger onChange function
-			elem.bind("click", function() {
-				scope.$apply(function() {
-					if(modelCtrl.$modelValue === falseValue) {
-						modelCtrl.$setViewValue(trueValue);
-					} else {
-						modelCtrl.$setViewValue(falseValue);
-					}
-				});
-			});
-		}
-	};
-});
\ No newline at end of file
diff --git a/app.js b/app.js
deleted file mode 100644
index 2b89069..0000000
--- a/app.js
+++ /dev/null
@@ -1,14 +0,0 @@
-"use strict";
-
-angular.module("angular-bootstrap-checkbox-test", ["ui.checkbox"]).controller("index", function($scope) {
-	$scope.checkboxModel = [
-		false, false, false,false, false, false, false, false, true, false, true
-	];
-
-	$scope.changes = 0;
-	$scope.onChange = function() {
-		$scope.changes++;
-	};
-
-	$scope.isDisabled = false;
-});
\ No newline at end of file
diff --git a/bower.json b/bower.json
index e8bf99d..5bde218 100644
--- a/bower.json
+++ b/bower.json
@@ -1,19 +1,12 @@
 {
-  "name": "angular-bootstrap-checkbox",
-  "version": "0.3.1",
-  "authors": [
-    "Sebastian Hammerl, Getslash GmbH"
-  ],
-  "description": "A checkbox for AngularJS styled to fit the Twitter Bootstrap standard design",
-  "main": "angular-bootstrap-checkbox.js",
+  "name": "ez-checkbox",
+  "version": "0.0.0",
+  "description": "A checkbox for AngularJS",
   "keywords": [
     "angular",
     "angularjs",
     "directive",
-    "ui",
-    "bootstrap",
     "form",
-    "input",
     "checkbox"
   ],
   "license": "MIT",
@@ -24,9 +17,6 @@
   ],
   "dependencies": {
     "angular": ">= 1.2.0",
-    "bootstrap": ">= 3.0.0"
-  },
-  "devDependencies": {
-    "angular-scenario": ">= 1.2.0"
+    "font-awesome": ">= 4.0.0"
   }
 }
diff --git a/checkbox.png b/checkbox.png
deleted file mode 100644
index ca3ca48..0000000
Binary files a/checkbox.png and /dev/null differ
diff --git a/dist/ez-checkbox.css b/dist/ez-checkbox.css
new file mode 100644
index 0000000..083eb7e
--- /dev/null
+++ b/dist/ez-checkbox.css
@@ -0,0 +1,12 @@
+.ez-checkbox {
+  position: relative;
+  margin-right: 5px;
+  color: #333;
+  cursor: pointer;
+}
+.ez-checkbox:hover {
+  text-decoration: none;
+}
+.ez-checkbox i {
+  cursor: pointer;
+}
diff --git a/dist/ez-checkbox.min.css b/dist/ez-checkbox.min.css
new file mode 100644
index 0000000..017769a
--- /dev/null
+++ b/dist/ez-checkbox.min.css
@@ -0,0 +1 @@
+.ez-checkbox,.ez-checkbox i{cursor:pointer}.ez-checkbox{position:relative;margin-right:5px;color:#333}.ez-checkbox:hover{text-decoration:none}
\ No newline at end of file
diff --git a/dist/ez-checkbox.min.js b/dist/ez-checkbox.min.js
new file mode 100644
index 0000000..0ad9db5
--- /dev/null
+++ b/dist/ez-checkbox.min.js
@@ -0,0 +1 @@
+"use strict";angular.module("ez.checkbox",[]).directive("ezCheckbox",[function(){return{require:"ngModel",restrict:"EA",replace:"true",transclude:!0,template:'<a class="ez-checkbox" ng-click="toggle()"><i class="fa fa-lg" ng-class="{\'fa-check-square-o\': checked, \'fa-square-o\': !checked}"></i><span ng-transclude></span></a>',scope:{},link:function(a,b,c,d){var e=!0,f=!1;c.hasOwnProperty("trueValue")&&(e=c.trueValue),c.hasOwnProperty("invert")&&(f=e,e=!1),d.$render=function(){a.checked=d.$modelValue===e?!0:!1},a.toggle=function(){d.$setViewValue(d.$modelValue===f?e:f),d.$render()}}}}]);
\ No newline at end of file
diff --git a/index.html b/index.html
index c1fc638..f41d1ca 100644
--- a/index.html
+++ b/index.html
@@ -1,369 +1,137 @@
 <!DOCTYPE html>
 <html>
 <head>
-	<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" />
-	<script src="bower_components/jquery/dist/jquery.js"></script>
-	<script src="bower_components/angular/angular.js"></script>
-	<script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
-	<script src="angular-bootstrap-checkbox.js"></script>
-	<script src="app.js"></script>
-</head>
-<body ng-app="angular-bootstrap-checkbox-test" ng-controller="index">
 
-<table class="table" style="width:800px;">
-	<tr>
-		<th style="width:150px;">
-			Example
-		</th>
-		<th style="width:20px;"></th>
-		<th style="width:100px;">
-			Value
-		</th>
-		<th style="width:150px;"></th>
-		<th>
-			Code
-		</th>
-		<th></th>
-	</tr>
+	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
+  <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
 
-	<tr>
-		<td>
-			Minimal example
-		</td>
-		<td>
-			<checkbox id="checkbox0" ng-model="checkboxModel[0]"></checkbox>
-		</td>
-		<td>
-			<span id="checkboxModel0" ng-bind="checkboxModel[0]"></span>
-		</td>
-		<td>
-			<button id="checkboxButton0true" style="width:150px;" ng-click="checkboxModel[0] = true">
-				Set to true
-			</button><br>
-			<button id="checkboxButton0false" style="width:150px;" ng-click="checkboxModel[0] = false">
-				Set to false
-			</button>
-		</td>
-		<td style="width:300px;">
+	<link href="dist/ez-checkbox.css" rel="stylesheet"/>
 
-<pre>&lt;checkbox
-    ng-model="checkboxModel[0]"
-&gt;&lt;/checkbox&gt</pre>
-
-		</td>
-	</tr>
-
-	<tr>
-		<td>
-			Example with custom name attribute
-		</td>
-		<td>
-			<checkbox id="checkbox1" ng-model="checkboxModel[1]" name="custom-name"></checkbox>
-		</td>
-		<td>
-			<span id="checkboxModel1" ng-bind="checkboxModel[1]"></span>
-		</td>
-		<td>
-			<button id="checkboxButton1true" style="width:150px;" ng-click="checkboxModel[1] = true">
-				Set to true
-			</button><br>
-			<button id="checkboxButton1false" style="width:150px;" ng-click="checkboxModel[1] = false">
-				Set to false
-			</button>
-		</td>
-		<td style="width:300px;">
+	<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
+	<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.js"></script>
 
-<pre>&lt;checkbox
-    ng-model="checkboxModel[1]"
-    <b>name="custom-name"</b>
-&gt;&lt;/checkbox&gt</pre>
+	<script src="src/ez-checkbox.js"></script>
+	<script>
+    "use strict";
 
-		</td>
-	</tr>
+    angular.module("myApp", ["ez.checkbox"]).controller("MyCtrl", function($scope) {
 
-	<tr>
-		<td>
-			Example with custom true value
-		</td>
-		<td>
-			<checkbox id="checkbox2" ng-model="checkboxModel[2]" ng-true-value="The Truth"></checkbox>
-		</td>
-		<td>
-			<span id="checkboxModel2" ng-bind="checkboxModel[2]"></span>
-		</td>
-		<td>
-			<button id="checkboxButton2true" style="width:150px;" ng-click="checkboxModel[2] = true">
-				Set to true
-			</button><br>
-			<button id="checkboxButton2false" style="width:150px;" ng-click="checkboxModel[2] = false">
-				Set to false
-			</button><br>
-			<button id="checkboxButton2truth" style="width:150px;" ng-click="checkboxModel[2] = 'The Truth'">
-				Set to "The Truth"
-			</button>
-		</td>
-		<td style="width:300px;">
+      $scope.form = {
+        example1: true,
+        example2: false,
+        example3: true
+      };
 
-<pre>&lt;checkbox
-    ng-model="checkboxModel[2]"
-    <b>ng-true-value="The Truth"</b>
-&gt;&lt;/checkbox&gt</pre>
+      $scope.$watch('form', function(n, o) {
+        if (n === o) {
+          return;
+        }
 
-		</td>
-	</tr>
+        console.log('form changed', n);
+      }, true);
+    });
+  </script>
+</head>
+<body ng-app="myApp" ng-controller="MyCtrl">
 
+<table class="table">
 	<tr>
-		<td>
-			Example with custom false value
-		</td>
-		<td>
-			<checkbox id="checkbox3" ng-model="checkboxModel[3]" ng-false-value="The Untruth"></checkbox>
-		</td>
-		<td>
-			<span id="checkboxModel3" ng-bind="checkboxModel[3]"></span>
-		</td>
-		<td>
-			<button id="checkboxButton3true" style="width:150px;" ng-click="checkboxModel[3] = true">
-				Set to true
-			</button><br>
-			<button id="checkboxButton3false" style="width:150px;" ng-click="checkboxModel[3] = false">
-				Set to false
-			</button><br>
-			<button id="checkboxButton3untruth" style="width:150px;" ng-click="checkboxModel[3] = 'The Untruth'">
-				Set to "The Untruth"
-			</button>
-		</td>
-		<td style="width:300px;">
-
-<pre>&lt;checkbox
-    ng-model="checkboxModel[3]"
-    <b>ng-false-value="The Untruth"</b>
-&gt;&lt;/checkbox&gt</pre>
-
-		</td>
+    <th style="width:200px;">Example</th>
+		<th style="width:200px;">Checkbox</th>
+		<th style="width:100px;">Value</th>
+		<th style="width:150px;">External Control</th>
+		<th style="width:300px;">Code</th>
 	</tr>
 
 	<tr>
 		<td>
-			Example with custom true and false value
+			Minimal example
 		</td>
 		<td>
-			<checkbox id="checkbox4" ng-model="checkboxModel[4]" ng-true-value="The Truth" ng-false-value="The Untruth"></checkbox>
+			<ez-checkbox ng-model="form.example1">
+        Checkbox Label
+      </ez-checkbox>
 		</td>
 		<td>
-			<span id="checkboxModel4" ng-bind="checkboxModel[4]"></span>
+			<span ng-bind="form.example1"></span>
 		</td>
 		<td>
-			<button id="checkboxButton4true" style="width:150px;" ng-click="checkboxModel[4] = true">
+			<button ng-click="form.example1 = true">
 				Set to true
 			</button><br>
-			<button id="checkboxButton4false" style="width:150px;" ng-click="checkboxModel[4] = false">
+			<button  ng-click="form.example1 = false">
 				Set to false
-			</button><br>
-			<button id="checkboxButton4truth" style="width:150px;" ng-click="checkboxModel[4] = 'The Truth'">
-				Set to "The Truth"
-			</button><br>
-			<button id="checkboxButton4untruth" style="width:150px;" ng-click="checkboxModel[4] = 'The Untruth'">
-				Set to "The Untruth"
 			</button>
 		</td>
-		<td style="width:300px;">
+		<td>
 
-<pre>&lt;checkbox
-    ng-model="checkboxModel[4]"
-    <b>ng-true-value="The Truth"</b>
-    <b>ng-false-value="The Untruth"</b>
-&gt;&lt;/checkbox&gt</pre>
+<pre>&lt;ez-checkbox
+	ng-model="form.example1"
+&gt;&lt;/ez-checkbox&gt</pre>
 
 		</td>
 	</tr>
 
 	<tr>
 		<td>
-			Example with change listener when clicked
+			Example with inverted truth and custom name attribute
 		</td>
 		<td>
-			<checkbox id="checkbox5" ng-model="checkboxModel[5]" ng-change="onChange()"></checkbox>
+			<ez-checkbox invert="true" ng-model="form.example2" name="example2"></ez-checkbox>
 		</td>
 		<td>
-			<span id="checkboxModel5" ng-bind="checkboxModel[5]"></span><br>
-			<br>
-			Clicks: <span id="changes" ng-bind="changes"></span>
+			<span id="checkboxModel1" ng-bind="form.example2"></span>
 		</td>
 		<td>
-			<button id="checkboxButton5true" style="width:150px;" ng-click="checkboxModel[5] = true">
+			<button ng-click="form.example2 = true">
 				Set to true
 			</button><br>
-			<button id="checkboxButton5false" style="width:150px;" ng-click="checkboxModel[5] = false">
+			<button ng-click="form.example2 = false">
 				Set to false
 			</button>
 		</td>
-		<td style="width:300px;">
+		<td>
 
-<pre>&lt;checkbox
-    ng-model="checkboxModel[5]"
-    <b>ng-change="onChange()"</b>
-&gt;&lt;/checkbox&gt</pre>
+<pre>&lt;ez-checkbox
+	ng-model="form.example2" invert="true"
+	<b>name="example2"</b>
+&gt;&lt;/ez-checkbox&gt</pre>
 
 		</td>
 	</tr>
 
 	<tr>
 		<td>
-			Example disabled checkbox
+			Example with custom true value
 		</td>
 		<td>
-			<checkbox id="checkbox6" ng-model="checkboxModel[6]" ng-disabled="isDisabled === true"></checkbox>
+			<ez-checkbox ng-model="form.example3" true-value="The Real True"></ez-checkbox>
 		</td>
 		<td>
-			<span id="checkboxModel6" ng-bind="checkboxModel[6]"></span>
+			<span ng-bind="form.example3"></span>
 		</td>
 		<td>
-			<button id="checkboxButton6true" style="width:150px;" ng-click="checkboxModel[6] = true">
+			<button ng-click="form.example3 = true">
 				Set to true
 			</button><br>
-			<button id="checkboxButton6false" style="width:150px;" ng-click="checkboxModel[6] = false">
+			<button ng-click="form.example3 = false">
 				Set to false
+			</button><br>
+			<button ng-click="form.example3 = 'The Real True'">
+				Set to "The Real True"
 			</button>
-			<button id="checkboxButton6enable" style="width:150px;" ng-click="isDisabled = false">
-				Enable
-			</button>
-			<button id="checkboxButton6disable" style="width:150px;" ng-click="isDisabled = true">
-				Disable
-			</button>
-		</td>
-		<td style="width:300px;">
-
-<pre>&lt;checkbox
-    ng-model="checkboxModel[6]"
-    <b>ng-disabled="isDisabled === true"</b>
-&gt;&lt;/checkbox&gt</pre>
-
 		</td>
-	</tr>
-
-	<tr>
 		<td>
-			Different Sizes (normal, large, larger, largest)
-		</td>
-		<td colspan="3">
-			<checkbox id="checkbox7a" ng-model="checkboxModel[7]"></checkbox>
-			<checkbox id="checkbox7b" large ng-model="checkboxModel[7]"></checkbox>
-			<checkbox id="checkbox7c" larger ng-model="checkboxModel[7]"></checkbox>
-			<checkbox id="checkbox7d" largest ng-model="checkboxModel[7]"></checkbox>
-			<br><br>
-			<checkbox id="checkbox8a" ng-model="checkboxModel[8]"></checkbox>
-			<checkbox id="checkbox8b" large ng-model="checkboxModel[8]"></checkbox>
-			<checkbox id="checkbox8c" larger ng-model="checkboxModel[8]"></checkbox>
-			<checkbox id="checkbox8d" largest ng-model="checkboxModel[8]"></checkbox>
-		</td>
 
-		<td style="width:300px;">
+<pre>&lt;ez-checkbox
+	ng-model="form.example3"
+	<b>true-value="The Real True"</b>
+&gt;&lt;/ez-checkbox&gt</pre>
 
-<pre>&lt;checkbox
-    ng-model="checkboxModel[7]"
-&gt;&lt;/checkbox&gt
-&lt;checkbox <b>large</b>
-    ng-model="checkboxModel[7]"
-&gt;&lt;/checkbox&gt
-&lt;checkbox <b>larger</b>
-    ng-model="checkboxModel[7]"
-&gt;&lt;/checkbox&gt
-&lt;checkbox <b>largest</b>
-    ng-model="checkboxModel[7]"
-&gt;&lt;/checkbox&gt</pre>
-
-		</td>
-	</tr>
-
-	<tr>
-		<td>
-			Different Styles (normal, primary, success, info, warning, danger)
-		</td>
-		<td></td>
-		<td>
-			default:<br><br><br>
-
-			primary:<br><br><br>
-
-			success:<br><br><br>
-
-			info:<br><br><br>
-
-			warning:<br><br><br>
-
-			danger:
-		</td>
-		<td>
-			<checkbox id="checkbox9a" ng-model="checkboxModel[9]"></checkbox>
-			&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
-			<checkbox id="checkbox10a" ng-model="checkboxModel[10]"></checkbox><br><br><br>
-
-			<checkbox id="checkbox9b" class="btn-primary" ng-model="checkboxModel[9]"></checkbox>
-			&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
-			<checkbox id="checkbox10b" class="btn-primary" ng-model="checkboxModel[10]"></checkbox><br><br><br>
-
-			<checkbox id="checkbox9c" class="btn-success" ng-model="checkboxModel[9]"></checkbox>
-			&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
-			<checkbox id="checkbox10c" class="btn-success" ng-model="checkboxModel[10]"></checkbox><br><br><br>
-
-			<checkbox id="checkbox9d" class="btn-info" ng-model="checkboxModel[9]"></checkbox>
-			&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
-			<checkbox id="checkbox10d" class="btn-info" ng-model="checkboxModel[10]"></checkbox><br><br><br>
-
-			<checkbox id="checkbox9e" class="btn-warning" ng-model="checkboxModel[9]"></checkbox>
-			&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
-			<checkbox id="checkbox10e" class="btn-warning" ng-model="checkboxModel[10]"></checkbox><br><br><br>
-
-			<checkbox id="checkbox9f" class="btn-danger" ng-model="checkboxModel[9]"></checkbox>
-			&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
-			<checkbox id="checkbox10f" class="btn-danger" ng-model="checkboxModel[10]"></checkbox>
-		</td>
-
-		<td style="width:300px;">
-
-<pre>&lt;checkbox
-    ng-model="checkboxModel[9]"
-&gt;&lt;/checkbox&gt
-&lt;checkbox <b>class="btn-primary"</b>
-    ng-model="checkboxModel[9]"
-&gt;&lt;/checkbox&gt
-&lt;checkbox <b>class="btn-success"</b>
-    ng-model="checkboxModel[9]"
-&gt;&lt;/checkbox&gt
-&lt;checkbox <b>class="btn-info"</b>
-    ng-model="checkboxModel[9]"
-&gt;&lt;/checkbox&gt
-&lt;checkbox <b>class="btn-warning"</b>
-    ng-model="checkboxModel[9]"
-&gt;&lt;/checkbox&gt
-&lt;checkbox <b>class="btn-danger"</b>
-    ng-model="checkboxModel[9]"
-&gt;&lt;/checkbox&gt</pre>
 		</td>
 	</tr>
 
-	<tr>
-		<td colspan="5">
-			<b>app.js:</b>
-			<pre>
-angular.module("angular-bootstrap-checkbox-test", ["ui.checkbox"])
-.controller("index", function($scope) {
-    $scope.checkboxModel = [
-        false, false, false,false, false, false, false, false, true, false, true
-    ];
-
-    $scope.changes = 0;
-    $scope.onChange = function() {
-        $scope.changes++;
-    };
-
-    $scope.isDisabled = false;
-});
-</pre>
-		</td>
-	</tr>
 </table>
 
 </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/karma.conf.js b/karma.conf.js
deleted file mode 100644
index 1eab1b9..0000000
--- a/karma.conf.js
+++ /dev/null
@@ -1,28 +0,0 @@
-// Karma configuration
-// Generated on Wed May 21 2014 09:55:50 GMT+0200 (CEST)
-
-module.exports = function(config) {
-	config.set({
-		basePath     : '',
-		frameworks   : ["ng-scenario"],
-		files        : [
-			"angular-bootstrap-checkbox.js",
-			"app.js",
-			"test.js",
-			"index.html"
-		],
-		exclude      : [],
-		preprocessors: {},
-		reporters    : ['progress'],
-		port         : 8001,
-		colors       : true,
-		logLevel     : config.LOG_INFO,
-		autoWatch    : true,
-//		browsers     : ["PhantomJS", "Chrome", "Firefox", "Opera"],
-		browsers     : ["Chrome"],
-		singleRun    : false,
-		proxies   : {
-			"/": "http://localhost:8000/"
-		}
-	});
-};
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..0d8469d
--- /dev/null
+++ b/package.json
@@ -0,0 +1,19 @@
+{
+  "name": "ez-checkbox",
+  "version": "0.0.0",
+  "licence": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git://github.com/jdewit/ez-checkbox.git"
+  },
+  "devDependencies": {
+    "grunt": "~0.4.2",
+    "grunt-bump": "0.0.11",
+    "grunt-contrib-concat": "*",
+    "grunt-contrib-cssmin": "^0.12.3",
+    "grunt-contrib-jshint": "*",
+    "grunt-contrib-less": "^0.11.4",
+    "grunt-contrib-uglify": "latest",
+    "grunt-contrib-watch": "*"
+  }
+}
diff --git a/sizes.png b/sizes.png
deleted file mode 100644
index 15632eb..0000000
Binary files a/sizes.png and /dev/null differ
diff --git a/src/ez-checkbox.js b/src/ez-checkbox.js
new file mode 100644
index 0000000..e44210d
--- /dev/null
+++ b/src/ez-checkbox.js
@@ -0,0 +1,48 @@
+'use strict';
+
+angular.module('ez.checkbox', [])
+.directive('ezCheckbox', [function() {
+	return {
+		require: 'ngModel',
+		restrict: 'EA',
+		replace: 'true',
+		transclude: true,
+		template: '<a class="ez-checkbox" ng-click="toggle()">' +
+                '<i class="fa fa-lg" ng-class="{\'fa-check-square-o\': checked, \'fa-square-o\': !checked}"></i>' +
+                '<span ng-transclude></span>' +
+              '</a>',
+    scope: {},
+		link: function(scope, elem, attrs, modelCtrl) {
+			var trueValue = true;
+			var falseValue = false;
+
+			if (attrs.hasOwnProperty('trueValue')) {
+				trueValue = attrs.trueValue;
+			}
+
+      // invert truthyness if invert is defined
+      if (attrs.hasOwnProperty('invert')) {
+        falseValue = trueValue;
+        trueValue = false;
+      }
+
+      modelCtrl.$render = function() {
+        if (modelCtrl.$modelValue === trueValue) {
+          scope.checked = true;
+        } else {
+          scope.checked = false;
+        }
+      };
+
+      scope.toggle = function() {
+        if (modelCtrl.$modelValue === falseValue) {
+          modelCtrl.$setViewValue(trueValue);
+        } else {
+          modelCtrl.$setViewValue(falseValue);
+        }
+
+        modelCtrl.$render();
+			};
+		}
+	};
+}]);
diff --git a/src/ez-checkbox.less b/src/ez-checkbox.less
new file mode 100644
index 0000000..c6a9a3c
--- /dev/null
+++ b/src/ez-checkbox.less
@@ -0,0 +1,14 @@
+.ez-checkbox {
+	position: relative;
+	margin-right: 5px;
+  color: #333;
+  cursor: pointer;
+
+  &:hover {
+    text-decoration: none;
+  }
+
+  i {
+    cursor: pointer;
+  }
+}
diff --git a/styles.png b/styles.png
deleted file mode 100644
index cdbf362..0000000
Binary files a/styles.png and /dev/null differ
diff --git a/test.js b/test.js
deleted file mode 100644
index 18ce87a..0000000
--- a/test.js
+++ /dev/null
@@ -1,353 +0,0 @@
-"use strict";
-
-describe("Checkbutton Tests", function() {
-	it("Minimal Example", function() {
-		browser().navigateTo("index.html");
-
-		// Check if the checkbox has been replaced with template
-		expect(element("#checkbox0").attr("class")).toBe("btn btn-default ng-isolate-scope ng-valid btn-xs ng-dirty");
-
-
-		// Check if the checkbox is unchecked
-		expect(element("#checkbox0 > span:eq(0)").attr("class")).toBe("glyphicon");
-		expect(element("#checkboxModel0").text()).toBe("false");
-
-
-		// Click checkbox to be checked
-		element("#checkbox0").click();
-		expect(element("#checkbox0 > span:eq(0)").attr("class")).toBe("glyphicon glyphicon-ok");
-		expect(element("#checkboxModel0").text()).toBe("true");
-
-		// Click the checkbox to be unchecked
-		element("#checkbox0").click();
-		expect(element("#checkbox0 > span:eq(0)").attr("class")).toBe("glyphicon");
-		expect(element("#checkboxModel0").text()).toBe("false");
-
-
-		// Click external trigger for true
-		element("#checkboxButton0true").click();
-		expect(element("#checkbox0 > span:eq(0)").attr("class")).toBe("glyphicon glyphicon-ok");
-		expect(element("#checkboxModel0").text()).toBe("true");
-
-		// Click external trigger for false
-		element("#checkboxButton0false").click();
-		expect(element("#checkbox0 > span:eq(0)").attr("class")).toBe("glyphicon");
-		expect(element("#checkboxModel0").text()).toBe("false");
-	});
-
-	it("Example with Custom Name", function() {
-		browser().navigateTo("index.html");
-
-		// Check if the checkbox has been replaced with template
-		expect(element("#checkbox1").attr("class")).toBe("btn btn-default ng-isolate-scope ng-valid btn-xs ng-dirty");
-
-
-		// Check if the name is set correctly
-		expect(element("#checkbox1").attr("name")).toBe("custom-name");
-
-
-		// Check if the checkbox is unchecked
-		expect(element("#checkbox1 > span:eq(0)").attr("class")).toBe("glyphicon");
-		expect(element("#checkboxModel1").text()).toBe("false");
-
-
-		// Click checkbox to be checked
-		element("#checkbox1").click();
-		expect(element("#checkbox1 > span:eq(0)").attr("class")).toBe("glyphicon glyphicon-ok");
-		expect(element("#checkboxModel1").text()).toBe("true");
-
-		// Click the checkbox to be unchecked
-		element("#checkbox1").click();
-		expect(element("#checkbox1 > span:eq(0)").attr("class")).toBe("glyphicon");
-		expect(element("#checkboxModel1").text()).toBe("false");
-
-
-		// Click external trigger for true
-		element("#checkboxButton1true").click();
-		expect(element("#checkbox1 > span:eq(0)").attr("class")).toBe("glyphicon glyphicon-ok");
-		expect(element("#checkboxModel1").text()).toBe("true");
-
-		// Click external trigger for false
-		element("#checkboxButton1false").click();
-		expect(element("#checkbox1 > span:eq(0)").attr("class")).toBe("glyphicon");
-		expect(element("#checkboxModel1").text()).toBe("false");
-	});
-
-	it("Example with Custom True Value", function() {
-		browser().navigateTo("index.html");
-
-		// Check if the checkbox has been replaced with template
-		expect(element("#checkbox2").attr("class")).toBe("btn btn-default ng-isolate-scope ng-valid btn-xs ng-dirty");
-
-
-		// Check if the checkbox is unchecked
-		expect(element("#checkbox2 > span:eq(0)").attr("class")).toBe("glyphicon");
-		expect(element("#checkboxModel2").text()).toBe("false");
-
-
-		// Click checkbox to be checked
-		element("#checkbox2").click();
-		expect(element("#checkbox2 > span:eq(0)").attr("class")).toBe("glyphicon glyphicon-ok");
-		expect(element("#checkboxModel2").text()).toBe("The Truth");
-
-		// Click the checkbox to be unchecked
-		element("#checkbox2").click();
-		expect(element("#checkbox2 > span:eq(0)").attr("class")).toBe("glyphicon");
-		expect(element("#checkboxModel2").text()).toBe("false");
-
-
-		// Click external trigger for true
-		element("#checkboxButton2true").click();
-		expect(element("#checkbox2 > span:eq(0)").attr("class")).toBe("glyphicon glyphicon-ok");
-		expect(element("#checkboxModel2").text()).toBe("The Truth");
-
-		// Click external trigger for false
-		element("#checkboxButton2false").click();
-		expect(element("#checkbox2 > span:eq(0)").attr("class")).toBe("glyphicon");
-		expect(element("#checkboxModel2").text()).toBe("false");
-
-		// Click external trigger for truth
-		element("#checkboxButton2truth").click();
-		expect(element("#checkbox2 > span:eq(0)").attr("class")).toBe("glyphicon glyphicon-ok");
-		expect(element("#checkboxModel2").text()).toBe("The Truth");
-	});
-
-	it("Example with Custom False Value", function() {
-		browser().navigateTo("index.html");
-
-		// Check if the checkbox has been replaced with template
-		expect(element("#checkbox3").attr("class")).toBe("btn btn-default ng-isolate-scope ng-valid btn-xs ng-dirty");
-
-
-		// Check if the checkbox is unchecked
-		expect(element("#checkbox3 > span:eq(0)").attr("class")).toBe("glyphicon");
-		expect(element("#checkboxModel3").text()).toBe("The Untruth");
-
-
-		// Click checkbox to be checked
-		element("#checkbox3").click();
-		expect(element("#checkbox3 > span:eq(0)").attr("class")).toBe("glyphicon glyphicon-ok");
-		expect(element("#checkboxModel3").text()).toBe("true");
-
-		// Click the checkbox to be unchecked
-		element("#checkbox3").click();
-		expect(element("#checkbox3 > span:eq(0)").attr("class")).toBe("glyphicon");
-		expect(element("#checkboxModel3").text()).toBe("The Untruth");
-
-
-		// Click external trigger for true
-		element("#checkboxButton3true").click();
-		expect(element("#checkbox3 > span:eq(0)").attr("class")).toBe("glyphicon glyphicon-ok");
-		expect(element("#checkboxModel3").text()).toBe("true");
-
-		// Click external trigger for false
-		element("#checkboxButton3false").click();
-		expect(element("#checkbox3 > span:eq(0)").attr("class")).toBe("glyphicon");
-		expect(element("#checkboxModel3").text()).toBe("The Untruth");
-
-
-		// Click checkbox to be checked
-		element("#checkbox3").click();
-		expect(element("#checkbox3 > span:eq(0)").attr("class")).toBe("glyphicon glyphicon-ok");
-		expect(element("#checkboxModel3").text()).toBe("true");
-
-		// Click external trigger for untruth
-		element("#checkboxButton3untruth").click();
-		expect(element("#checkbox3 > span:eq(0)").attr("class")).toBe("glyphicon");
-		expect(element("#checkboxModel3").text()).toBe("The Untruth");
-	});
-
-	it("Example with Custom True and False Value", function() {
-		browser().navigateTo("index.html");
-
-		// Check if the checkbox has been replaced with template
-		expect(element("#checkbox4").attr("class")).toBe("btn btn-default ng-isolate-scope ng-valid btn-xs ng-dirty");
-
-
-		// Check if the checkbox is unchecked
-		expect(element("#checkbox4 > span:eq(0)").attr("class")).toBe("glyphicon");
-		expect(element("#checkboxModel4").text()).toBe("The Untruth");
-
-
-		// Click checkbox to be checked
-		element("#checkbox4").click();
-		expect(element("#checkbox4 > span:eq(0)").attr("class")).toBe("glyphicon glyphicon-ok");
-		expect(element("#checkboxModel4").text()).toBe("The Truth");
-
-		// Click the checkbox to be unchecked
-		element("#checkbox4").click();
-		expect(element("#checkbox4 > span:eq(0)").attr("class")).toBe("glyphicon");
-		expect(element("#checkboxModel4").text()).toBe("The Untruth");
-
-
-		// Click external trigger for true
-		element("#checkboxButton4true").click();
-		expect(element("#checkbox4 > span:eq(0)").attr("class")).toBe("glyphicon glyphicon-ok");
-		expect(element("#checkboxModel4").text()).toBe("The Truth");
-
-		// Click external trigger for false
-		element("#checkboxButton4false").click();
-		expect(element("#checkbox4 > span:eq(0)").attr("class")).toBe("glyphicon");
-		expect(element("#checkboxModel4").text()).toBe("The Untruth");
-
-		// Click external trigger for truth
-		element("#checkboxButton4truth").click();
-		expect(element("#checkbox4 > span:eq(0)").attr("class")).toBe("glyphicon glyphicon-ok");
-		expect(element("#checkboxModel4").text()).toBe("The Truth");
-
-		// Click external trigger for untruth
-		element("#checkboxButton4untruth").click();
-		expect(element("#checkbox4 > span:eq(0)").attr("class")).toBe("glyphicon");
-		expect(element("#checkboxModel4").text()).toBe("The Untruth");
-	});
-
-	it("Minimal Example", function() {
-		browser().navigateTo("index.html");
-
-		// Check if the checkbox has been replaced with template
-		expect(element("#checkbox5").attr("class")).toBe("btn btn-default ng-isolate-scope ng-valid btn-xs ng-dirty");
-
-
-		// Check if the checkbox is unchecked
-		expect(element("#checkbox5 > span:eq(0)").attr("class")).toBe("glyphicon");
-		expect(element("#checkboxModel5").text()).toBe("false");
-		expect(element("#changes").text()).toBe("0");
-
-
-		// Click checkbox to be checked
-		element("#checkbox5").click();
-		expect(element("#checkbox5 > span:eq(0)").attr("class")).toBe("glyphicon glyphicon-ok");
-		expect(element("#checkboxModel5").text()).toBe("true");
-		expect(element("#changes").text()).toBe("1");
-
-		// Click the checkbox to be unchecked
-		element("#checkbox5").click();
-		expect(element("#checkbox5 > span:eq(0)").attr("class")).toBe("glyphicon");
-		expect(element("#checkboxModel5").text()).toBe("false");
-		expect(element("#changes").text()).toBe("2");
-
-
-		// Click external trigger for true
-		element("#checkboxButton5true").click();
-		expect(element("#checkbox5 > span:eq(0)").attr("class")).toBe("glyphicon glyphicon-ok");
-		expect(element("#checkboxModel5").text()).toBe("true");
-		expect(element("#changes").text()).toBe("2");
-
-		// Click external trigger for false
-		element("#checkboxButton5false").click();
-		expect(element("#checkbox5 > span:eq(0)").attr("class")).toBe("glyphicon");
-		expect(element("#checkboxModel5").text()).toBe("false");
-		expect(element("#changes").text()).toBe("2");
-	});
-
-	it("Example Disabled", function() {
-		browser().navigateTo("index.html");
-
-		// Check if the checkbox has been replaced with template
-		expect(element("#checkbox6").attr("class")).toBe("btn btn-default ng-isolate-scope ng-valid btn-xs ng-dirty");
-
-
-		// Check if the checkbox is unchecked and enabled
-		expect(element("#checkbox6 > span:eq(0)").attr("class")).toBe("glyphicon");
-		expect(element("#checkboxModel6").text()).toBe("false");
-		expect(element("#checkbox6").attr("disabled")).toBe(undefined);
-
-
-		// Click checkbox to be checked
-		element("#checkbox6").click();
-		expect(element("#checkbox6 > span:eq(0)").attr("class")).toBe("glyphicon glyphicon-ok");
-		expect(element("#checkboxModel6").text()).toBe("true");
-
-		// Click the checkbox to be unchecked
-		element("#checkbox6").click();
-		expect(element("#checkbox6 > span:eq(0)").attr("class")).toBe("glyphicon");
-		expect(element("#checkboxModel6").text()).toBe("false");
-
-
-		// Click external trigger for true
-		element("#checkboxButton6true").click();
-		expect(element("#checkbox6 > span:eq(0)").attr("class")).toBe("glyphicon glyphicon-ok");
-		expect(element("#checkboxModel6").text()).toBe("true");
-
-		// Click external trigger for false
-		element("#checkboxButton6false").click();
-		expect(element("#checkbox6 > span:eq(0)").attr("class")).toBe("glyphicon");
-		expect(element("#checkboxModel6").text()).toBe("false");
-
-
-		// Disable checkbox
-		element("#checkboxButton6disable").click();
-		expect(element("#checkbox6").attr("disabled")).toBe("disabled");
-
-		// Click disabled checkbox
-		element("#checkbox6").click();
-		expect(element("#checkbox6 > span:eq(0)").attr("class")).toBe("glyphicon");
-		expect(element("#checkboxModel6").text()).toBe("false");
-
-		// Click external trigger for true
-		element("#checkboxButton6true").click();
-		expect(element("#checkbox6 > span:eq(0)").attr("class")).toBe("glyphicon glyphicon-ok");
-		expect(element("#checkboxModel6").text()).toBe("true");
-
-		// Click external trigger for false
-		element("#checkboxButton6false").click();
-		expect(element("#checkbox6 > span:eq(0)").attr("class")).toBe("glyphicon");
-		expect(element("#checkboxModel6").text()).toBe("false");
-
-
-		// Enable checkbox again
-		element("#checkboxButton6enable").click();
-		expect(element("#checkbox6").attr("disabled")).toBe(undefined);
-	});
-
-	it("Example Different Sizes", function() {
-		browser().navigateTo("index.html");
-
-		// Check if the checkbox has been replaced with template
-		expect(element("#checkbox7a").attr("class")).toBe("btn btn-default ng-isolate-scope ng-valid btn-xs ng-dirty");
-		expect(element("#checkbox7b").attr("class")).toBe("btn btn-default ng-isolate-scope ng-valid btn-sm ng-dirty");
-		expect(element("#checkbox7c").attr("class")).toBe("btn btn-default ng-isolate-scope ng-valid ng-dirty");
-		expect(element("#checkbox7d").attr("class")).toBe("btn btn-default ng-isolate-scope ng-valid btn-lg ng-dirty");
-		expect(element("#checkbox8a").attr("class")).toBe("btn btn-default ng-isolate-scope ng-valid btn-xs ng-dirty");
-		expect(element("#checkbox8b").attr("class")).toBe("btn btn-default ng-isolate-scope ng-valid btn-sm ng-dirty");
-		expect(element("#checkbox8c").attr("class")).toBe("btn btn-default ng-isolate-scope ng-valid ng-dirty");
-		expect(element("#checkbox8d").attr("class")).toBe("btn btn-default ng-isolate-scope ng-valid btn-lg ng-dirty");
-
-		expect(element("#checkbox7a").css("width")).toBe("22px");
-		expect(element("#checkbox7b").css("width")).toBe("30px");
-		expect(element("#checkbox7c").css("width")).toBe("34px");
-		expect(element("#checkbox7d").css("width")).toBe("45px");
-		expect(element("#checkbox8a").css("width")).toBe("22px");
-		expect(element("#checkbox8b").css("width")).toBe("30px");
-		expect(element("#checkbox8c").css("width")).toBe("34px");
-		expect(element("#checkbox8d").css("width")).toBe("45px");
-
-		expect(element("#checkbox7a").css("height")).toBe("22px");
-		expect(element("#checkbox7b").css("height")).toBe("30px");
-		expect(element("#checkbox7c").css("height")).toBe("34px");
-		expect(element("#checkbox7d").css("height")).toBe("45px");
-		expect(element("#checkbox8a").css("height")).toBe("22px");
-		expect(element("#checkbox8b").css("height")).toBe("30px");
-		expect(element("#checkbox8c").css("height")).toBe("34px");
-		expect(element("#checkbox8d").css("height")).toBe("45px");
-	});
-
-	it("Example Different Styles", function() {
-		browser().navigateTo("index.html");
-
-		// Check if the checkbox has been replaced with template
-		expect(element("#checkbox9a").attr("class")).toBe("btn btn-default ng-isolate-scope ng-valid btn-xs ng-dirty");
-		expect(element("#checkbox9b").attr("class")).toBe("btn-primary btn btn-default ng-isolate-scope ng-valid btn-xs ng-dirty");
-		expect(element("#checkbox9c").attr("class")).toBe("btn-success btn btn-default ng-isolate-scope ng-valid btn-xs ng-dirty");
-		expect(element("#checkbox9d").attr("class")).toBe("btn-info btn btn-default ng-isolate-scope ng-valid btn-xs ng-dirty");
-		expect(element("#checkbox9e").attr("class")).toBe("btn-warning btn btn-default ng-isolate-scope ng-valid btn-xs ng-dirty");
-		expect(element("#checkbox9f").attr("class")).toBe("btn-danger btn btn-default ng-isolate-scope ng-valid btn-xs ng-dirty");
-
-		expect(element("#checkbox9a").css("background-color")).toBe("rgb(255, 255, 255)");
-		expect(element("#checkbox9b").css("background-color")).toBe("rgb(66, 139, 202)");
-		expect(element("#checkbox9c").css("background-color")).toBe("rgb(92, 184, 92)");
-		expect(element("#checkbox9d").css("background-color")).toBe("rgb(91, 192, 222)");
-		expect(element("#checkbox9e").css("background-color")).toBe("rgb(240, 173, 78)");
-		expect(element("#checkbox9f").css("background-color")).toBe("rgb(217, 83, 79)");
-	});
-});