title: AngularJS $http.delete and $window.location.reload()
body: <p>I have an interesting issue with the $http.delete() and $window.location.reload() functions. Basically I am calling a delete method that in turn calls the $http.delete() call which - using a REST API interface - removes data from a database (mongoDB). For reasons unknown this is what's happening:</p>
  
  <ul>
  <li>delete is successful in the database
  <ul>
  <li>this is verified as the data is no longer in the database</li>
  <li>also monitored using Chrome DevTools it shows status: 200</li>
  </ul></li>
  <li>$window.location.reload() gets called and nothing happens
  <ul>
  <li>Chrome DevTools shows a GET call to the root of the domain but the status is 'pending'</li>
  </ul></li>
  </ul>
  
  <p>The page does not time out, it basically keeps on loading and loading and loading. Once I hit refresh / CTRL-F5 all goes back to normal and I can see that my item has been deleted.</p>
  
  <p>Some excerpts from my code:</p>
  
  <p>app.js</p>
  
  <pre><code>angular.module('contacts', ['ngRoute', 'contacts.factory', 'contacts.filters', 'ui.bootstrap']).
    config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
      $routeProvider.
        when('/', {
          templateUrl: '/p/list',
          controller: ListCtrl,
        }).
        otherwise({
          redirectTo: '/'
        });
      $locationProvider.html5Mode(true);
    }]);
  </code></pre>
  
  <p>controllers.js</p>
  
  <pre><code>function ListCtrl($scope, $modal, contactFactory) {
   //code removed
    $scope.delete = function(c) {
      var id = c._id;
      var modalInstance = $modal.open({
        templateUrl: 'deleteContactModal',
        controller: deleteContactModalCtrl,
        resolve: {
          contact: function() {
            return contactFactory.getContact(id);
          }
        }
      });
    }
  }
  
  var deleteContactModalCtrl = function($scope, $route, $modalInstance, $window, contact, contactFactory) {
    $scope.name = contact.data.contact.name;
  
    $scope.deleteContact = function() {
      contactFactory.deleteContact(contact.data.contact._id).success(function() {
        //have also tried: $window.location.reload(true);
        //as well as window.location.href('/') - didn't work either
        $modalInstance.close($window.location.reload());
      });
    };
  }
  </code></pre>
  
  <p>factory.js</p>
  
  <pre><code>angular.module("contacts.factory", []).
    factory('contactFactory', function($http){
      return {
        //code removed
        deleteContact: function(id) {
          return $http.delete('/api/contact/' + id);
        }
      }
    });
  </code></pre>
  
  <p>backend - app.js</p>
  
  <pre><code>//usual express setup
  app.delete('/api/contact/:id', api.delete); //delete contact
  </code></pre>
  
  <p>backend - api.js</p>
  
  <pre><code>//code removed
  exports.delete = function (req, res) {
    var id = req.params.id;
    if (id) {
      ContactModel.findById(id, function (err, contact) {
        contact.remove(function (err) {
          if (!err) {
            res.json(true);
          } else {
            res.json(false)
            console.log(err);
          }
        });
      });
    }
  };
  </code></pre>
  
  <p>At the moment I'm not even sure if this issue is related to the frontend or to the backend. As mentioned before - the backend portion is working fine - the data is deleted from the DB.</p>