I'm struggling to figure out why my $interval service isn't canceling properly. It seems like something important is missing.
In my code, I've set up a counter that's tied to a counting property: $scope.sessionCounter
$scope.sessionCounter = 5;
var intializeSessionCounter = function () {
$scope.sessionTime();
$interval(function () {
$scope.sessionCounter--;
if ($scope.sessionCounter > 1) {
console.log('timedown', $scope.sessionCounter);
}
else {
$scope.showSessionTimeoutWarningModal();
$scope.stop();
}
}, 1000);
}
intializeSessionCounter();
Everything works fine until it reaches the if statement and eventually hits the else statement when $scope.sessionCounter becomes 1. The modal opens as intended, and then $scope.stop is called with $interval.cancel(null) to stop the interval from running. However, for some reason, the interval doesn't cancel and the modal keeps reopening because the $interval continues even after reaching negative numbers.
$scope.stop = function () {
$interval.cancel(null);
}