Angularjs button loading like twitter bootstraps e.g. <button btn-loading="something.busy" data-loading="I'm working on it...">Do It</button>

angularjs-button-loading.js

angular.module('ui.bootstrap.buttons', [])

    .directive('btnLoading',function () {
        return {
            link:function (scope, element, attrs) {
                scope.$watch(
                    function () {
                        return scope.$eval(attrs.btnLoading);
                    },
                    function (value) {
                        if(value) {
                            element.addClass("disabled").attr("disabled","disabled");
                            element.data('resetText', element.html());
                            element.html(element.data('loading'));
                        } else {
                            element.removeClass("disabled").removeAttr("disabled")
                            element.html(element.data('resetText'));
                        }
                    }
                );
            }
        };
    }
);

Thanks for this.
Can replace bottom else with below to work with ng-disabled correctly.
if (!scope.$eval(attrs.ngDisabled)) {
element.removeClass("disabled").removeAttr("disabled");
element.html(element.data('resetText'));
}

I'm finally using this: (maintaining the same property as Twitter Bootstrap)
(also in buttons add the property in ng-disabled)

directive('btnLoading',function () {
        return {
            link:function (scope, element, attrs) {
                scope.$watch(
                    function () {
                        return scope.$eval(attrs.btnLoading);
                    },
                    function (value) {
                        if(value) {
                            if (!attrs.hasOwnProperty('ngDisabled')) {
                                element.addClass('disabled').attr('disabled', 'disabled');
                            }

                            element.data('resetText', element.html());
                            element.html(element.data('loading-text'));
                        } else {
                            if (!attrs.hasOwnProperty('ngDisabled')) {
                                element.removeClass('disabled').removeAttr('disabled');
                            }

                            element.html(element.data('resetText'));
                        }
                    }
                );
            }
        };
    })

@marcalj, Its really nice example and working like a charm, I am using the loading button inside modal and the button gets disabled on click but the other form elements like other text boxes, dropdowns are active, so I want to disable that too, is there any solution for this.

Good job, @marcalj. Works perfect.

If you are already referencing the bootstrap library you can just simply call:

element.button('loading');

and

element.button('reset');