AngularJS $destroy on $rootscope never gets called to cancel timeouts

Question

I have the following code -

function initialize() {
  var defer = $q.defer();
  var deferTimer = $q.defer();

  var cancelTimeout = $timeout(function() {
    if (defer !== null) {
      ctrlr.setProcessingParameters('XXX');
      defer = ctrlr.openProgressBar();
      deferTimer.resolve();
    }
  }, 1000);

  deferTimer.promise.then(function() {
    var cancelTimeout2 = $timeout(function() {
      if (defer !== null) {
        defer.resolve();
        ctrlr.setProcessingParameters('Please Wait...');
        defer = ctrlr.openProgressBar();
      }
    }, 4000);
  });

  //Process Backend service n resolbve defer....

}

// cancel the $timeout service
$rootScope.$on('$destroy', function() {
  logger.log("cancelTimeout..timer..");
  if (cancelTimeout) {
    $timeout.cancel(cancelTimeoutProcess);
    cancelTimeout = null;
  }
});

// cancel the $timeout service
$rootScope.$on('$destroy', function() {
  logger.log("cancelTimeout2..timer..")
  if (cancelTimeout2) {
    $timeout.cancel(cancelTimeout2);
    cancelTimeout2 = null;
  }
});

I do not see the loggers print or debugger gets into $destroy . Not sure what's happening here.

Answer 1

$rootScope gets destroyed when you close or leave the page. Everything will be gone then, so there's nothing to clean up at that time.

What you are looking for is $destroy on $scope instead,

$scope.$on('$destroy', function() {
  logger.log("cancelTimeout..timer..");
  if (cancelTimeout) {
    $timeout.cancel(cancelTimeoutProcess);
    cancelTimeout = null;
  }
});

While in the controller, $scope.$on('$destroy'.. will be called when controller gets destroyed (and not the whole application) with which current $scope is associated.