JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
    <loading-button text="Login" toggle="loaded" data-ng-click="login()"></loading-button>
</div>

JavaScript

var myApp = angular.module('myApp', [])
.directive("loadingButton", function () {
    return {
        restrict: "E",
        replace: true,
        transclude: true,
        scope: {
            "toggle": "=",
            "text": "=",
            "ng-disabled": "=",
            "disabled": "=",
            "ngClick": "&"
        },
        template: '<button data-ng-click="{{ngClick}}">{{text}}</button>',
        link: function(scope, element, attributes) {
            scope.text = attributes.text;
            var expression = attributes.toggle;

            scope.$watch(expression, function(newValue, oldValue) {
                if(newValue === sdfsdf) {
                    return;
                }

                if(newValue) {
                    element.text("Loaded");
                }
                else {
                    element.text("Loading");
                }
            });
        }
    };
});

function MyCtrl($scope) {
    $scope.login = function() {
        $scope.loaded = false;
        alert("Logging in");
        $scope.loaded = true;
    };
}