Loading button directive with AngularJS 1.4.x, Font-Awesome & Bootstrap

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope,  $timeout, DataService) {
  
  $scope.results = [];
  
  $scope.button = {
                text :"Do this",
                cssClass: '',
                hideLoading: true,
                textLoading: 'loading...',
                cssClassLoading: 'loading'
              };
              
   $scope.button2 = {
                text :"Do that",
                cssClass: '',
                hideLoading: true,
                textLoading: 'loading2...',
                cssClassLoading: ''
              };
  
  $scope.button3 = {
                text :"Do something completely different",
                cssClass: '',
                hideLoading: true,
                textLoading: 'loading completely different ...',
                cssClassLoading: ''
              };
  
  $scope.doThis = function()  {
      $timeout(function() {
         $scope.button.text="Do this";
         $scope.button.cssClass= '';
         $scope.button.hideLoading= true;
    }, 2000);
  };
  
  $scope.doThat= function()  {
      $timeout(function() {
        $scope.button2.text="Do that";
        $scope.button2.cssClass= '';
        $scope.button2.hideLoading= true;
    }, 2000);
  };
  
  //example with a asyncr. call
   $scope.doSomething= function()  {
     //make a ajax call
    DataService.getData().then(function(data) {
        //once its finished we reset the button
        $scope.button3.text="Do something completely different";
        $scope.button3.cssClass= '';
        $scope.button3.hideLoading= true;
        $scope.results= data.data.results;
    });
  };
  
});

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link data-require="bootstrap-css@3.3.6" data-semver="3.3.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" />
    <link data-require="font-awesome@4.5.0" data-semver="4.5.0" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.css" />
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.8/angular.js" data-semver="1.4.8"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.js"></script>
    <script data-require="jquery@*" data-semver="2.1.4" src="https://code.jquery.com/jquery-2.1.4.js"></script>
    <script data-require="bootstrap@*" data-semver="3.3.6" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <script data-require="ui-bootstrap@*" data-semver="1.1.1" src="https://cdn.rawgit.com/angular-ui/bootstrap/gh-pages/ui-bootstrap-1.1.1.js"></script>
    <script data-require="ui-router@*" data-semver="0.2.15" src="https://cdn.rawgit.com/angular-ui/ui-router/805e69bae319e922e4d3265b7ef565058aaff850/release/angular-ui-router.js"></script>
    <script data-require="angular-route@*" data-semver="1.4.8" src="https://code.angularjs.org/1.4.8/angular-route.js"></script>
    <script src="app.js"></script>
    <script src="dataService.js"></script>
    <script src="directives.js"></script>
  </head>
  
  <body ng-controller="MainCtrl">
    <div class="container">
    <p>&nbsp;</p>
    <div class="panel panel-default">
      <div class="panel-heading">Example 1 with timeout:</div>
      <div class="panel-body">
         <active-button ng-click="doThis()"  button="button" spinner-icon="fa-circle-o-notch"></active-button>
      </div>
    </div>
    
    <div class="panel panel-default">
      <div class="panel-heading">Example 2 with timeout:</div>
      <div class="panel-body">
         <active-button ng-click="doThat()"  button="button2" spinner-icon="fa-spinner"></active-button>
      </div>
    </div>
  
    <div class="panel panel-default">
      <div class="panel-heading">Example 3 with an AJAX call:</div>
      <div class="panel-body">
        <active-button ng-click="doSomething()"  button="button3" spinner-icon="fa-refresh "></active-button>
       <ul class="list-group">
         <li class="list-group-item" ng-repeat="result in results">{{result.formatted_address}}</li>
      </ul>
      </div>
    </div>
    
    </div>
  </body>

</html>

/* Put your css in here */

 .btn-default.loading:focus, .btn-default.focus.loading, .loading {
        background-color: #7F7F7F;
}

angular.module('plunker')
.directive('activeButton', function($compile) {
	
	return {
	  restrict: 'AE',
		replace: true,
		transclude: true,
		scope: {  
		    button: '=',
		    spinnerIcon: '@'
		},
		templateUrl: "activeButton.html",
		
		link: function (scope, element, attrs) {
			element.on('click', function () {
        scope.button.text = scope.button.textLoading;
        scope.button.cssClass = scope.button.cssClassLoading;
        scope.button.hideLoading=false;
        scope.$apply(function(id) { });
      });
		}
	}
});

<button type="button" class="btn btn-default {{button.cssClass}}">{{button.text}} <span class="fa {{spinnerIcon}} fa-spin" ng-hide="button.hideLoading" ></span></button>

angular.module('plunker')
.factory("DataService", function( $q, $http) {
	
	var apiurl = "//maps.googleapis.com/maps/api/geocode/json";

	var getData = function( paramsMun)  {
	    var _params = {address: 'Ari', sensor: false};
	    return $http.get(apiurl, {	params: _params		})
	    .success(function(data) {
	    	//success
	    }).error(function () {
	    	alert("Error");
	    });
	};

  return {
    getData: getData
  }
});