AngularJS $interval не останавливаться на .cancel();

У меня есть приложение SPA с несколькими представлениями в AngularJS, я определил $interval, который запускается из другого контроллера представления. Когда я нажимаю кнопку с вызванной функцией и строкой $interval.cancel(); в нем он не останавливается.

Вот примеры моего кода:

ГлавныйКонтроллер:

 $scope.$on("startInterval", function () {
    $interval(function warningsControl() {
        console.info("Timer stamp!");

        $.ajax({
            // some web api call which works fine
        })
    }, 10000);
});

$scope.stop = function () {
    $interval.cancel();
}

$scope.logoutButton = {
    text: "Logout",
    type: "normal",
    visible: false,
    onClick: function () {

        // some working code

        $scope.stop();

        var logoutBtn = $("#logout-btn").dxButton("instance");
        logoutBtn.option({
            visible: false
        });
    }
}

И ВторойКонтроллер:

$scope.authenticateButton = {
    type: "default",
    text: "Log In",
    onClick: function () {

        $.ajax({
            // some web api calling
            success: (data) => {
                // some working code
                $rootScope.$broadcast("startInterval");
            }
        })
    }
}

Этот код запускает интервал, и все работает нормально, пока я не нажму кнопку «Выход из системы» - он сделал все, кроме остановки интервала.

Есть идеи, как это исправить? Буду признателен за совет.