JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-app="components">
    <div ng-controller="MainCtrl">
        <input type="checkbox" ng-model="p.checked" />
         <div checkbox="p.checked" ng-click="$parent.test()">test</div>
        {{p.checked}}
    </div>
</div>

JavaScript

function MainCtrl($scope){ 
    $scope.p = {checked: false,  name:'test'};
    $scope.$watch('p', function(){
        console.log($scope.p);
    }, true);
    
    $scope.test = function(){
        alert('test');
    }
}

angular.module('components', []).
directive('checkbox', function () {
    return {
        link : function (scope, ele, attr){
            ele.bind('click', function(){
                ele.toggleClass('active');
                scope.$apply(function(){
                    scope.value = ele.hasClass('active');
                });
            });
            
            scope.$watch('value', function(newv, oldv){
                newv ? ele.addClass('active') : ele.removeClass('active');
            });
        },
        scope : {
            value: '=checkbox'
        }
    }
});