javascript - Enforce single click in angular js -

i creating client , calling api takes @ least 2 seconds respond want user cannot click register twice.

i incorporating fiddle in controller.

https://jsfiddle.net/zsp7m155/

but happening first function takes 2 second disable button , after enables button , send request api. doing wrong here?

code 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 domain name');                            }              else if(acreateclientresponse[0] == $scope.response_code.cm_invalid_input) {                  alert('invalid request');                            }              else {                  alert('service not available');                     }          });            }; 

code of 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>  

you have couple of options, simple disable button when call api , re-enable when resolves. 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 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 domain name');                            }              else if(acreateclientresponse[0] == $scope.response_code.cm_invalid_input) {                  alert('invalid request');                            }              else {                  alert('service not available');                     }          }, function(){             $scope.isregistering = false;         });               }, 1000);  };