JSFiddle - React, Tailwind, and code Playground

HTML

<div data-ng-app="app">
    <div data-ng-controller="ParentCtrl">
        <checkboxstyling facetresults={{facetresults}} value="ckeckboxModel" title="{{title}}" data-facetresults="33" data-ng-model="ckeckboxModel"> </checkboxstyling>
    </div>
</div>

JavaScript

angular.module('app', []).directive('checkboxstyling', function() {
    return {
        restrict: 'E',
        replace: true,
        template:
        '<label class="checkbox">' +
        '<input type="checkbox" ng-model="ckeckboxModel" id="{{title}}" name="{{title}}">' +
        '<span ng-class="{\'checked\': ckeckboxModel, \'unchecked\': !ckeckboxModel}"> {{title}} </span>' +
        '<i class="facetResults">({{facetresults}})</i> ' +
        '</label>',
        link: function(scope, element, attrs, controller) {
            element.bind('click', function() {
                scope.$apply(function(){
                    scope.value = !scope.value;
                });
            });
        },
        scope: {
            value: '=value',
            title: '@title',
            facetresults: '@facetresults'
        }
    }
});

function ParentCtrl($scope){
    $scope.ckeckboxModel= true;
    $scope.title = "idontgetset";
    $scope.facetresults = "meeither";
}