Hide button and show after 3 seconds using AngularJS - angularjs

Question

I am just new to AngularJS and would like to ask how to show button after hiding it for 3 seconds when it is clicked.
Please see my code below.
<button class="btn btn-primary" ng-click="showDiv=true" ng-show="!showDiv">Button</button>
Thanks

Answer 1

Try use $timeout service
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $timeout) {
$scope.showDiv = true;
$scope.hide= function(){
$scope.showDiv = false;
$timeout(function () {
$scope.showDiv = true;
}, 3000);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
<button class="btn btn-primary" ng-click="hide()" ng-show="showDiv" >Button</button>
</div>

Answer 2

Use the $timeout service in the controller and use it to unset showDiv.
app.controller('MyController', function ($scope, $timeout) {
$scope.showDiv = true;
$scope.enable= function () {
$scope.showDiv =false;
$timeout(function () { $scope.showDiv = true; }, 3000);
};
}

Answer 3

you can do this in this way also
angular.module("app",[])
.controller("ctrl",function($scope,$timeout){
$scope.showDiv=false;
$scope.timeout = $timeout;
$scope.saveFun = function(){
$scope.showDiv=true;
}
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
<button class="btn btn-primary" ng-show="!showDiv" ng-click="timeout(saveFun,3000);">Save</button>
</div>

Answer 4

Try using $timeout this may help you
JS code
var app = angular.module('myApp', []);
app.controller('ctrl', function($scope, $timeout) {
$scope.hide = false;
// function
$scope.hideMe = function() {
$scope.hide = true;
var sec = 3000; // 3 seconds
$timeout(function() {
$scope.hide = false
}, sec);
};
});
HTML
<div ng-app='myApp'>
<div ng-controller='ctrl'>
<button class="btn btn-primary" ng-click="hideMe()" ng-hide="hide">Button</button>
</div>
</div>
Here is Jsfiddle link