AngularJS Showing Busy icon when loading data

Question

i have created a small example which would show spinner when data will be loading. create directive for this because i can reuse it. problem is spinner loading all the time which is not right.

see the code and tell me where i made the mistake ?

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('https://api.myjson.com/bins/x1rqt.json')
.success(function(data) {
$scope.students = data[0].students;
});
}

});

jsfiddle link https://jsfiddle.net/tridip/6L6p0bgd/