JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-app="Joy">
  <div ng-controller="JoyCtrl as vm">
    <div my-checkbox value="vm.myValue" on-check="vm.myFunction(valueFromDirective)"></div>
  </div>
</div>

JavaScript

angular.module("Joy", [])
  .controller("JoyCtrl", ["$scope", function($scope) {
    this.myValue = false;
		this.myFunction = function(valueFromDirective) {
    	alert(valueFromDirective);
    };
  }])
  .directive("myCheckbox", function() {
    return {
      scope: {
        'onCheck': '&',
        'value': '='
      },
      template: '<div ng-click="vm.onCheck({valueFromDirective: vm.value + \' is from the directive\'})"><input type="checkbox" ng-model="vm.value" ng-checked="vm.value"></div>',
      controllerAs: 'vm',
      bindToController: true,
      controller: [function() {}]
    }
  });