var myapp = angular.module('sampleapp', [ ]); myapp.controller('samplecontoller', function ($scope) { $scope.loader = { loading: false, }; $scope.showloader = function(){ $scope.loader.loading = true ; } $scope.hideloader = function(){ $scope.loader.loading = false ; } });
<div ng-app="sampleapp"> <div ng-controller="samplecontoller"> <div class="form"> <p>Click to see the loader</p> <button class="btn btn-primary" ng-click="showloader()">Show loader</button> <button class="btn btn-primary" ng-click="hideloader()">Hide loader</button> </div> <div class="cancel"> <button ng-show="loader.loading" class="btn btn-success">Loading... <i class="fa fa-spinner fa-spin"></i> </button> </div> </div> </div>
.form{ padding:20px } .cancel{ padding:20px; }