gkilmain/app.js

## app.js
angular.module('app', [])
  .controller('MainCtrl', MainCtrl)
  .directive('checkBox', checkBox);

function checkBox() {
  var directive = {
    controller: Controller,
    link: link,
    restrict: 'E',
    require: 'ngModel',
    scope: {
        ngModel: '=',
        forId: '@'
    },
    template: '<input type="checkbox" id="{{forId}}" ngModel="user.isFamous">' +
              '<label class="custom" for="{{forId}}">Checkbox</label>'
  };

  return directive;
}

function link(scope, element, attrs, ngModel) {

            scope.$watch('scope.ngModel', function (value){
              console.log('checked', value);
            });
}

function Controller($scope) {
  $scope.ngModel = false;

  $scope.$watch($scope.ngModel, function(v) {
    console.log('nothings changed man!');
  });
}

function MainCtrl($scope) {
  $scope.user = {};
  $scope.user.isAdmin = false;
 // $scope.user.isFamous = true;
}

## index
<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
	<meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Angular TODO</title>
	<link rel="stylesheet" type="text/css" href="bootstrap.min.css">
	<link rel="stylesheet" type="text/css" href="styles.css">
	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
	<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
	<script src="app.js"></script>
	<!-- <script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.4.13/d3.min.js"></script> -->
</head>
<body>
<div class="container" ng-controller="MainCtrl">
<form name="userForm">
	<div class="form-group">
		<label>Name</label>
		<input type="text" class="form-control" ng-model="user.name">
	</div>
		<div class="form-group">
		<label>Email</label>
		<input type="text" class="form-control" ng-model="user.email">
	</div>
	<div class="form-group">
		<label for="admin">Admin</label>
		<input type="checkbox" id="admin" ng-model="user.isAdmin">
	</div>
	<div class="form-group checkbox">
		<check-box ng-model="ngModel" for-id="famous"></check-box>
	</div>
</form>
<pre>{{user | json}}</pre>
</div>


</body>
</html>

## styles.css
input[type=checkbox].custom {
    display: none;
}

.custom {
    display: inline-block;
    cursor: pointer;
    position: relative;
    padding-left: 25px;
    margin-right: 15px;
    font-size: 13px;
}

.custom:before {
    content: "";
    display: inline-block;

    width: 16px;
    height: 16px;
  	border-radius: 3px;
    margin-right: 10px;
    position: absolute;
    left: 0;
    bottom: 1px;
    background-color: #aaa;
    box-shadow: inset 0px 2px 3px 0px rgba(0, 0, 0, .3), 0px 1px 0px 0px rgba(255, 255, 255, .8);
}

input[type=checkbox]:checked + .custom:before {
    content: "\2713";
    text-shadow: 1px 1px 1px rgba(0, 0, 0, .2);
    font-size: 15px;
    color: #f3f3f3;
    text-align: center;
    line-height: 15px;
}
	angular.module('app', [])
	.controller('MainCtrl', MainCtrl)
	.directive('checkBox', checkBox);

	function checkBox() {
	var directive = {
	controller: Controller,
	link: link,
	restrict: 'E',
	require: 'ngModel',
	scope: {
	ngModel: '=',
	forId: '@'
	},
	template: '<input type="checkbox" id="{{forId}}" ngModel="user.isFamous">' +
	'<label class="custom" for="{{forId}}">Checkbox</label>'
	};

	return directive;
	}

	function link(scope, element, attrs, ngModel) {

	scope.$watch('scope.ngModel', function (value){
	console.log('checked', value);
	});
	}

	function Controller($scope) {
	$scope.ngModel = false;

	$scope.$watch($scope.ngModel, function(v) {
	console.log('nothings changed man!');
	});
	}

	function MainCtrl($scope) {
	$scope.user = {};
	$scope.user.isAdmin = false;
	// $scope.user.isFamous = true;
	}
	<!DOCTYPE html>
	<html lang="en" ng-app="app">
	<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Angular TODO</title>
	<link rel="stylesheet" type="text/css" href="bootstrap.min.css">
	<link rel="stylesheet" type="text/css" href="styles.css">
	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
	<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
	<script src="app.js"></script>
	<!-- <script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.4.13/d3.min.js"></script> -->
	</head>
	<body>
	<div class="container" ng-controller="MainCtrl">
	<form name="userForm">
	<div class="form-group">
	<label>Name</label>
	<input type="text" class="form-control" ng-model="user.name">
	</div>
	<div class="form-group">
	<label>Email</label>
	<input type="text" class="form-control" ng-model="user.email">
	</div>
	<div class="form-group">
	<label for="admin">Admin</label>
	<input type="checkbox" id="admin" ng-model="user.isAdmin">
	</div>
	<div class="form-group checkbox">
	<check-box ng-model="ngModel" for-id="famous"></check-box>
	</div>
	</form>
	<pre>{{user \| json}}</pre>
	</div>


	</body>
	</html>
	input[type=checkbox].custom {
	display: none;
	}

	.custom {
	display: inline-block;
	cursor: pointer;
	position: relative;
	padding-left: 25px;
	margin-right: 15px;
	font-size: 13px;
	}

	.custom:before {
	content: "";
	display: inline-block;

	width: 16px;
	height: 16px;
	border-radius: 3px;
	margin-right: 10px;
	position: absolute;
	left: 0;
	bottom: 1px;
	background-color: #aaa;
	box-shadow: inset 0px 2px 3px 0px rgba(0, 0, 0, .3), 0px 1px 0px 0px rgba(255, 255, 255, .8);
	}

	input[type=checkbox]:checked + .custom:before {
	content: "\2713";
	text-shadow: 1px 1px 1px rgba(0, 0, 0, .2);
	font-size: 15px;
	color: #f3f3f3;
	text-align: center;
	line-height: 15px;
	}