Enforce single click in angular js

Question

I am creating a client and calling my API but it takes at least 2 seconds to respond so I want to that user cannot click the REGISTER twice.

I am incorporating this fiddle in my controller.

https://jsfiddle.net/zsp7m155/

But What happening is that first function takes 2 second to disable the button and after that it enables he button and send request to API. Am I doing something wrong here?

Code my my controller

CONTROLLER.JS

$scope.createClient = function() {


        ClientService.createClient($scope.theClient).then(function (aCreateClientResponse) {
            if(aCreateClientResponse[0] == $scope.RESPONSE_CODE.CM_SUCCESS) {                 
                alert('success');            
            } 
             else if(aCreateClientResponse[0] == $scope.RESPONSE_CODE.CM_DOMAINNAME_ERROR) {  
                 alert('Check your domain name');               
            } 
            else if(aCreateClientResponse[0] == $scope.RESPONSE_CODE.CM_INVALID_INPUT) {

                alert('Invalid request');               
            } 
            else {

                alert('Service is not available');        
            } 
        });          
 };

Code of my service

SERVICE.JS

 App.factory('ClientService', function($http,  API_URL, REQUEST_HEADER, RESPONSE_CODE) {

        createClient: function(aClient) {     

        var myCreateClientRequest = {
            "CreateClientRequest": {
                "Header": {
                    "CMMHeader": {
                        "Id": uuid2.newuuid()
                    }
                },
                "Client": {
                    "OrganizationName": aClient.Name,
                    "OrganizationDomain": aClient.Domain,
                },
            }
        };

        //API Call
        var promise = $http.post(API_URL.CREATE_CLIENT, myCreateClientRequest, REQUEST_HEADER).then(
        function(aCreateClientResponse) { //Success Callback

            return [aCreateClientResponse.data.CreateClientResponse.Result.ResponseCode,''];
        },
        function(aCreateClientResponse) { //Error Callback

            return [aCreateClientResponse.status,''];
        });

        return promise;
    },

              });

HTML

<button id="register-btn" name="register-btn" class="btn btn-primary" ng-disabled="((Client.User.UserPassword !== Client.User.UserconfirmPassword) || CreateClientForm.domain.$invalid || CreateClientForm.username.$invalid || CreateClientForm.email.$invalid || CreateClientForm.password.$invalid || CreateClientForm.confirmpassword .$invalid || CreateClientForm.organizationname.$invalid )" single-click="createClient()">{{ running ? 'Please wait...' : 'Register' }}</button> 

Answer 1

You have a couple of options, the most simple is just to disable the button when you call your API and re-enable when it resolves. You could do it like this:

<button id="register-btn" name="register-btn" class="btn btn-primary" ng-disabled="isRegistering" single-click="createClient()">{{ running ? 'Please wait...' : 'Register' }}</button>

and in your controller

$scope.isRegistering = false;

$scope.createClient = function() {

    $scope.isRegistering = true;
    return $timeout(function() { 
        ClientService.createClient($scope.theClient).then(function (aCreateClientResponse) {
            $scope.isRegistering = false;
            if(aCreateClientResponse[0] == $scope.RESPONSE_CODE.CM_SUCCESS) {                 
                alert('success');            
            } 
             else if(aCreateClientResponse[0] == $scope.RESPONSE_CODE.CM_DOMAINNAME_ERROR) {  
                 alert('Check your domain name');               
            } 
            else if(aCreateClientResponse[0] == $scope.RESPONSE_CODE.CM_INVALID_INPUT) {

                alert('Invalid request');               
            } 
            else {

                alert('Service is not available');        
            } 
        }, function(){
            $scope.isRegistering = false;
        });          
    }, 1000);
 };