Hide button after ng-click using AngularJS

Basically, you needs two things:

• A variable leveraging the button visibility
• A function to update this variable (you could do it in the HTML but I discourage it).

So you would have your button:

<button ng-click="hideButton()" ng-show="isButtonVisible === true" class="btn-default pull-right">
    Start
</button>

Then, you would have the following variables

$scope.isButtonVisible = true; // true to make the button visible by default

And finally, the function that toggles it:

$scope.hideButton = function() {
    $scope.isButtonVisible = false;
}

Note that you could use ng-if to remove the button from the DOM if you won't need it again.

Example: https://plnkr.co/edit/fnW8HR58zKHs4T34XRan

Note that this is pretty much the most basic question you could have on AngularJS, so I would advice you to read a bit about it before asking Stack Overflow.

You will need a variable to denote the visibility of the button, its value will change with click event.

<button ng-click="clickEventFunction(params)" ng-hide="isButtonVissible">Button</button>

The default value of this variable should be "false" to show the button

$scope.isButtonVissible = false

Then in the clickEventFunction, change the value to hide the button

$scope.clickEventFunction = function(params){
$scope.isButtonVissible = true; 
//* Do the logic code
}

I found the answer to the question with some assistance. Created an event in the click function and was able to hide the button.

<button ng-click="xyz($event)" class="btn-default pull-right">Start</button>

$scope.xyz = function ($event) {
    $($event.target).hide();

Cheers to all your guidance.

In View:

 <button ng-click="hideBtn = true" ng-hide="hideBtn">Button</button>

In controller :

 $scope.hideBtn = false;