Difference between resource.save() with callback and $promise in ngResource using AngularJS

Question

This is my factory:

// Factory
app.factory('BuildingListService', ['$resource', function($resource) {
  return {
    selectBuilding: function(building, callback) {
        return $resource(window.appSettings.context+'/requests/building')
                   .save(building, callback);
    }
  };
}]);

Now, I thought that these two bits of code should behave the same:

First:

 $scope.selectBuilding= function(building) {
     BuildingListService.selectBuilding(building, function() {
         $state.go('requests.detail.analystReview');
     });
 });

Second:

 $scope.selectBuilding= function(building) {
    BuildingListService.selectBuilding(building).$promise.then(function() {
       $state.go('requests.detail.analystReview');
    });
 };

However in the first state I get a race condition where the server has not finished the request prior to changing state. I am a little confused as to why that is. The second way I mentioned has no such issue. Is there a reason that the $state.go('requests.detail.analystReview'); would be called in the first bit of code before the server has finished? This one has really confused me.

Also note that solution one is working fine in IE and FireFox, I am starting to suspect a caching issue

Update: So I have solved my issue, the issue was caching related, IE caches a little aggressively sometimes I should have see that. However I am not sure why the first call would make IE more prone to caching the requests than the second. Thank you to anyone that looked at this.

Answer 1

Might it be that your first example isn't relying on BuildingListService at all? Shouldn't it be something like this?:

$scope.selectBuilding = function(building) {
  BuildingListService.selectBuilding(building, function() {
    $state.go('requests.detail.analystReview');
  });
};