JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-app="TestApp" ng-controller="MyController as ctrl">
    <button ng-click="ctrl.click()" ng-disabled="ctrl.disabled" disabled-button>
        Click Me
    </button>  
    <div>
        <label for="disabled">
            <input type="checkbox" ng-model="ctrl.disabled" />
            Disabled    
        </label> 
    </div>
    <div>{{ctrl.text}}</div>
</div>

JavaScript

var app = angular.module('TestApp', [])
.controller('MyController', function () {
    this.text = '';
    
    this.click = function () {
        this.text += 'click ';    
    }
    
    this.disabled = false;
})
.directive('disabledButton', function($parse) {
    return {
        restrict: 'A',
        transclude: true,
        scope: {
        },
        template: '<span ng-show="disabled">X</span><span ng-transclude></span>',
        link: function (scope, elem, attrs) {
            var disabled = $parse(attrs.ngDisabled);
            scope.disabled = false;
            scope.$watch(
                function() {
                    return disabled(scope.$parent);
                },
                function(newval) {
                    scope.disabled = newval;
                }
            );
        }
    };
})
;