Ajax spinner with angular

angular ajax spinner using interveptors

HTML

<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.js"></script>
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.3/angular.min.js"></script>
<div ng-app="myApp">

    <div ng-controller="searchController">

        <input type="text" ng-model="search.str" placeholder="search..."/>
        <button ng-click="search()">Search</button>
        <span spinner></span>
        <div>{{search.response}}</div>
    </div>
</div>

CSS

.done-true {
  text-decoration: line-through;
  color: grey;
}

JavaScript

var myApp = angular.module('myApp', [])
    .config(function ( $httpProvider ){
        $httpProvider.interceptors.push('spinnerInterceptor')
    })
    .factory('spinnerInterceptor', ['spinnerService', '$injector', function ( spinnerService, $injector ){
        var $http
        var shouldShowSpinner = function (){
            // get $http via $injector because of circular dependency problem
            $http = $http || $injector.get('$http')
            if( $http.pendingRequests.length < 1 ){
                spinnerService.setShowSpinner(false)
            }
        }

        var spinnerInterceptor = {
            request: function ( config ){
                spinnerService.setShowSpinner(true)
                return config;
            },
            response: function ( response ){
                shouldShowSpinner()
                return response
            }
        };
        return spinnerInterceptor;
    }])
    .service('spinnerService', [ function (){
        var obj = {}
        obj.showSpinner = false
        obj.getShowSpinner = function (){
            return obj.showSpinner
        }
        obj.setShowSpinner = function ( val ){
            obj.showSpinner = val
        }
        return obj
    }])
    .directive('spinner', ['spinnerService', function ( spinnerService ){
        return {
        replace:true,
        template: '<div class="loading"><img src="http://www.nasa.gov/multimedia/videogallery/ajax-loader.gif" width="20" height="20" />LOADING...</div>',
            link: function ( scope, element ){
                var showElem = function ( show ){
                    show ? element.show() : element.hide()
                }
                scope.$watch(function (){
                    return spinnerService.showSpinner
                }, function ( val ){
                    showElem(val)
                })
            }

        }
    }])
    .service('searchService', ['$http', function ( $http ){
        return {
            search:...