Hide button after ng-click using AngularJS - angularjs

Question

I'm new to angularjs and wanted to know how to hide a button after clicking (using ng-click) on it.
<button ng-click="xyz()" class="btn-default pull-right">
Start
</button>

Answer 1

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.

Answer 2

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
}

Answer 3

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.

Answer 4

In View:
<button ng-click="hideBtn = true" ng-hide="hideBtn">Button</button>
In controller :
$scope.hideBtn = false;