Loading Spinner in AngularJS for every Http Call

This code snippet is for how to get loading spinner for every $http call using AngularJS.

<!DOCTYPE html>
<html>
<head>
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.js"></script>
    <script src="script.js"></script>
</head>
<body ng-app="myApp" ng-controller="myController">
    <h1>Loading spinner</h1>
    <div data-loading> </div>
    <div>
        <ul ng-repeat="student in students">
            <li>{{student.name}}</li>
        </ul>
    </div>
    <button ng-click="loadData()" class="btn btn-primary">Click for Load data</button>
</body>
</html>

JavaScript

angular.module('myApp', [])
 .directive('loading',   ['$http' ,function ($http)
 {
     return {
         restrict: 'A',
         template: '<div class="loading-spiner"><img src="http://www.nasa.gov/multimedia/videogallery/ajax-loader.gif" /> </div>',
         link: function (scope, elm, attrs)
         {
             scope.isLoading = function () {
                 return $http.pendingRequests.length > 0;
             };

             scope.$watch(scope.isLoading, function (v)
             {
                 if(v){
                     elm.show();
                 }else{
                     elm.hide();
                 }
             });
         }
     };
 }])
  .controller('myController', function($scope, $http) {
      $scope.loadData = function() {
        $scope.students = [];
        $http.get('studentData.json')
          .success(function(data) {
              $scope.students = data[0].students;
        });
      }

  });

JSON data

[{
  "students":
  [
    { "id": 1, "name": "Vivek" },
    { "id": 2, "name": "Praveen" },
    { "id": 3, "name": "Uday" },
    { "id": 4, "name": "Santosh" }
  ]
}]

Below is the link for running sample code.

http://plnkr.co/edit/6TXpVKVjeCBHZ2bW9Fw6?p=preview