I am facing a problem with my Angular app. The issue arises when the {{controllername.name}} disappears to display the username after a session timeout. Even though the warning from ngIdle pops up, users can still refresh the screen without being redirected back to the login page.

The {{ctrlDash.userinfo.name}} vanishes after 20 minutes (refer to code snippet below).

<ul class='nav'>
    <li class='dropdown dark user-menu'>
        <a class='dropdown-toggle' data-toggle='dropdown' href='#'>
            <img width="23" height="23" alt="" src="assets/images/avatar.jpg" />
            <span class='user-name'>{{ctrlDash.userInfo.name}}</span>
            <b class='caret'></b>
        </a>
        <ul class='dropdown-menu'>
            <li>
                <a href='user_profile.html'>
                    <i class='icon-user'></i>
                    Profile
                </a>
            </li>
            <li>
                <a href='user_profile.html'>
                    <i class='icon-cog'></i>
                    Settings
                </a>
            </li>
            <li class='divider'></li>
            <li>
                <a href='sign_in.html' target="_self">
                    <i class='icon-signout'></i>
                    Sign out
                </a>
            </li>
        </ul>
    </li>
</ul>

What I want is a template feature that can "DETECT" this and force the user to log in again;

Below is the ng-template located at the bottom of the same page:

<!-- Templates for Modals -->
    <script type="text/ng-template" id="warning-dialog.html">
        <div class="modal-header">
            <h3>You're Idle. Do Something!</h3>
        </div>
        <div class="modal-body" idle-countdown="countdown" ng-init="countdown=5">
            <p>You'll be logged out in <span class="label label-warning">{{countdown}}</span> <span ng-pluralize="" count="countdown" when="{'one': 'second', 'other': 'seconds' }"></span>.</p>
            <progressbar max="20" value="countdown" animate="true" class="progress-striped active" type="warning"></progressbar>
        </div>
        <div class="modal-footer">
            Quick! Move your mouse and your session will reset...
        </div>

    </script>
    <script type="text/ng-template" id="timedout-dialog.html">
        <div class="modal-header">
            <h3>Oh, Snap! You've Timed Out!</h3>
        </div>
        <div class="modal-body">
            <p>
            You were idle too long.  Click the button below to be redirected to the login page and begin again.
            </p>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-danger btn-small" data-ng-click="goBack()">Back To Login</button>
        </div>
    </script>
    <!-- End Templates for Modals -->

Initially, the TIMER detects IDLE and then a WARNING notifies the user to log in again. However, upon refreshing the page, the {{ctrlDash.userInfo.name}} becomes empty.

Here is the code snippet for ngIdle:

//This is the IDLE function
            $scope.started = false;
            $scope.ended = false;

            $scope.events = [];
            $scope.idle = 20; //this is in ACTUAL seconds
            $scope.timeout = 20; //this is in ACTUAL seconds

            function closeModals() {
                if ($scope.warning) {
                    $scope.warning.close();
                    $scope.warning = null;
                }

                if ($scope.timedout) {
                    $scope.timedout.close();
                    $scope.timedout = null;
                }
            }

            $scope.$on('IdleStart', function () {
                closeModals();

                $scope.warning = $modal.open({
                    templateUrl: 'warning-dialog.html',
                    windowClass: 'modal-danger'
                });
            });

            $scope.$on('IdleEnd', function () {
                closeModals();
            });

            $scope.$on('IdleTimeout', function () {
                closeModals();
                $scope.timedout = $modal.open({
                    templateUrl: 'timedout-dialog.html',
                    windowClass: 'modal-danger'
                });
            });

            $scope.start = function () {
                closeModals();
                Idle.watch();
                $scope.started = true;
            };

            $scope.stop = function () {
                closeModals();
                Idle.unwatch();
                $scope.started = false;

            };
            if(!angular.isDefined($scope.goBack)) {

                console.log("I\'m not defined...");

                if(!angular.isFunction($scope.goBack)) {

                    console.log("I\'m not a function...")
                }
            }

            $scope.goBack = function _goBack() {
                closeModals();
                Idle.unwatch();
                $window.location.href = $scope.templateViews.logout;
            };

Lastly, the goBack() function inside the dashboardController = controller throws an unreferenced error.

Unreferenced error, goBack is NOT DEFINED.

These are the challenges I'm facing regarding my app. I would appreciate any assistance. Thank you.