Accessing scope variables when using ng-idle

Question

ng-idle is a custom angular directive that can be found here that allows for your angular app to check to see whether or not the user is idle.

Does anyone who's used this directive before know whether or not there are issues with $scope when editing the directive's properties?

Here's my JS:

// include the `ngIdle` module
var app = angular.module('demo', ['ngIdle', 'ui.bootstrap']);

app
.controller('EventsCtrl', function($scope, Idle, $modal) {
    $scope.logIn = function(){
        $scope.loggedIn = true;
        Idle.watch();
    };

    $scope.logOut = function(){
        $scope.loggedIn = false;
        Idle.unwatch();
    };

    $scope.events = [];

    $scope.$on('IdleStart', function() {
        $scope.amIdle = true;
    });

    $scope.$on('IdleWarn', function(e, countdown) {
        // follows after the IdleStart event, but includes a countdown until the user is considered timed out
        // the countdown arg is the number of seconds remaining until then.
        // you can change the title or display a warning dialog from here.
        // you can let them resume their session by calling Idle.watch()
    });

    $scope.$on('IdleTimeout', function() {
        // the user has timed out (meaning idleDuration + timeout has passed without any activity)
        // this is where you'd log them
        $scope.loggedIn = false;
        $scope.amIdle = false;
        Idle.unwatch();
        console.log("Timeout has been reached");
        console.log($scope.loggedIn);
    });

    $scope.$on('IdleEnd', function() {
        // the user has come back from AFK and is doing stuff. if you are warning them, you can use this to hide the dialog
        $scope.amIdle = false;
    });

   /*$scope.$on('Keepalive', function() {
        $scope.amIdle = false;
    });*/

})
.config(function(IdleProvider, KeepaliveProvider) {
    // configure Idle settings
    IdleProvider.idle(5); // in seconds
    IdleProvider.timeout(5); // in seconds
    KeepaliveProvider.interval(1); // in seconds
})

The log in/log out stuff is just basic stuff that controls the loggedIn variable, that is just used with ng-show to have a very basic log in screen to test the timeout functionality of ng-idle. Going idle/detecting whether or not the user has come back works pretty well too, the only issue is with the $scope.$on('IdleTimeout') function.

The program reaches the console log, and says that both log in is false, and that timeout has started, but the app does not update accordingly. When logout is false, the user should be returned to the login screen, which works when the user clicks the logout button but not in this instance where they time out.

Answer 1

It appears that the issue was that for whatever reason, the app wasn't being updated after the variable was changed. This was fixed by adding

$scope.$apply();

After the two booleans being set to false in the IdleTimeout function.