Directive to disable and show load sign on a button during http-request <p>Consider this runnable example <a href="http://plnkr.co/edit/a88cOYDVORDHQV3b5NGJ?p=preview" rel="nofollow">http://plnkr.co/edit/a88cOYDVORDHQV3b5NGJ?p=preview</a></p> <pre><code>angular.module('app', ['ngRoute']) .controller('myctrl',['$scope', '$timeout', function($scope, $timeout){ $scope.myjson = [{title:'one'},{title:'two'},{title:'three'}]; $scope.remove = function(idx){ $scope.loading = true; $timeout(function(){ $scope.myjson.splice(idx,1); $scope.loading = false }, 700) } }]) .filter('unsafe', function($sce) { return function(val) { return $sce.trustAsHtml(val); }; }) &lt;/script&gt; &lt;div ng-controller="myctrl"&gt; &lt;div ng-repeat="j in myjson"&gt; &lt;a class="btn btn-default" ng-bind-html=" loading? ( '&lt;i class=\'fa fa-refresh fa-spin\'&gt;&lt;/i&gt;' | unsafe) : ('Save' | unsafe)" ng-disabled="loading" ng-click="remove($index)"&gt;Remove&lt;/a&gt; &lt;b&gt;{{j.title}}&lt;/b&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p>The timeout is to simulate a http-request removing entities. This works if there is just one button (for example login or register). The problem is that each of the entities need to have their individual loading variable, and I don't know how to do it. I just want the button clicked on to show the loading symbol. For many buttons like this I think I need a directive...</p>