JSFiddle - React, Tailwind, and code Playground

HTML

<script type='text/ng-template' id='checkbox.html'>
	<label>
  	<input type="checkbox" ng-model="bindedModel" ng-true-value="bindedTrueValue" ng-false-value="bindedFalseValue" ng-change="bindedChange">{{bindedText}}
  </label>

</script>


  <div ng-controller="directiveController">
  <p>{{test}}</p>
  <p>
  <label>
  	<input type="checkbox" ng-model="user.veg" ng-true-value="true" ng-false-value="false" ng-change="checkboxChanged()">Vegetarian
  </label>
   <label>
  	<input type="checkbox" ng-model="user.nv" ng-true-value="true" ng-false-value="false" ng-change="checkboxChanged()">Non-Vegetarian
  </label>
  </p>
  	
    <checkbox text="Vegetarian" ng-model="user.veg" ng-true-value="true" ng-false-value="false" ng-change="checkboxChanged()"></checkbox>
    <checkbox text="Non-Vegetarian" ng-model="user.nv" ng-true-value="true" ng-false-value="false" ng-change="checkboxChanged()"></checkbox>
  </div>

JavaScript

var myApp = angular.module('directiveApp',[]);
myApp.controller('directiveController', function($scope){
	$scope.test="I am from controller";
  $scope.user={veg:true, nv:true}
  $scope.checkboxChanged=function(){
  console.log("changed");
  }
})
myApp.directive('checkbox', function(){
return {
restrict:'E',
scope:{
bindedModel:"=ngModel",
bindedText:'@text',
bindedTrueValue:'=ngTrueValue',
bindedFalseValue:'=ngFalseValue',
bindedChange:'=ngChange',
},
templateUrl:'checkbox.html',
link:function(scope,element,attrs){

}
}
})