AngularJS Ajax Spinner

HTML

<div ng-app="project">
  <h2>JavaScript Projects</h2>
  <div ng-view></div>



  <!-- CACHE FILE: list.html -->
  <script type="text/ng-template" id="list.html">
    <input type="text" ng-model="search" class="search-query" placeholder="Search">
    <table>
      <thead>
        <tr>
          <th>Project</th>
          <th>Description</th>
          <th><a href="#/new"><i class="icon-plus-sign"></i></a></th>
        </tr>
      </thead>
      <tbody>
        <tr ng-repeat="project in projects | filter:search | orderBy:'name'">
          <td><a href="{{project.site}}" target="_blank">{{project.name}}</a></td>
          <td>{{project.description}}</td>
          <td>
            <a href="#/edit/{{project._id.$oid}}"><i class="icon-pencil"></i></a>
          </td>
        </tr>
      </tbody>
    </table>
  </script>



  <!-- CACHE FILE: detail.html -->
  <script type="text/ng-template" id="detail.html">
    <form name="myForm">
      <div class="control-group" ng-class="{error: myForm.name.$invalid}">
        <label>Name</label>
        <input type="text" name="name" ng-model="project.name" required>
        <span ng-show="myForm.name.$error.required" class="help-inline">
            Required</span>
      </div>

      <div class="control-group" ng-class="{error: myForm.site.$invalid}">
        <label>Website</label>
        <input type="url" name="site" ng-model="project.site" required>
        <span ng-show="myForm.site.$error.required" class="help-inline">
            Required</span>
        <span ng-show="myForm.site.$error.url" class="help-inline">
            Not a URL</span>
      </div>

      <label>Description</label>
      <textarea name="description" ng-model="project.description"></textarea>

      <br>
      <a href="#/list" class="btn">Cancel</a>
      <button ng-click="save()" ng-disabled="isClean() || myForm.$invalid" class="btn btn-primary">Save</button>
      <button ng-click="destroy()" ng-show="project._id" class="btn...

CSS

</style>< !-- Ugly Hack due to jsFiddle issue: http: //goo.gl/BUfGZ --> 
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css"><script src="http://code.angularjs.org/angular-1.0.0rc5.min.js"></script><script src="http://code.angularjs.org/angular-resource-1.0.0rc5.min.js"></script><style>

JavaScript

angular.module('SharedServices', [])
  .config(function($httpProvider) {
    $httpProvider.responseInterceptors.push('myHttpInterceptor');
    var spinnerFunction = function(data, headersGetter) {
      // todo start the spinner here

      alert('start spinner');
      return data;
    };
    $httpProvider.defaults.transformRequest.push(spinnerFunction);
  })
  // register the interceptor as a service, intercepts ALL angular ajax http calls
  .factory('myHttpInterceptor', function($q, $window) {
    return function(promise) {
      return promise.then(function(response) {
        // do something on success
        // todo hide the spinner
        alert('stop spinner');
        return response;

      }, function(response) {
        // do something on error
        // todo hide the spinner
        alert('stop spinner');
        return $q.reject(response);
      });
    };
  })

angular.module('project', ['mongolab', 'SharedServices']).
config(function($routeProvider) {
  $routeProvider.
  when('/list', {
    controller: ListCtrl,
    template: 'list.html'
  }).
  when('/edit/:projectId', {
    controller: EditCtrl,
    template: 'detail.html'
  }).
  when('/new', {
    controller: CreateCtrl,
    template: 'detail.html'
  }).
  otherwise({
    redirectTo: '/list'
  });
});


function ListCtrl($scope, Project) {
  $scope.projects = Project.query();
}


function CreateCtrl($scope, $location, Project) {
  $scope.save = function() {
    Project.save($scope.project, function(project) {
      $location.path('/edit/' + project._id.$oid);
    });
  }
}


function EditCtrl($scope, $location, $routeParams, Project) {
  var self = this;

  Project.get({
    id: $routeParams.projectId
  }, function(project) {
    self.original = project;
    $scope.project = new Project(self.original);
  });

  $scope.isClean = function() {
    return angular.equals(self.original, $scope.project);
  }

  $scope.destroy = function() {
    self.original.destroy(function() {
     ...