javascript - How to automatically throw up a message when "Angular" {{variable}} disappears after Session DIES -

i have angular app, problem is, when {{controllername.name}} disappears displaying username, after session timeout, though warning ngidle comes up, user can still refresh screen , keeps on page not taking login page.

the {{ctrldash.userinfo.name}} disappears after 20 min. (see 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> 

so, now, want feature in template "detect" when happens , force user login again;

this ng-template on same page @ bottom:

<!-- templates modals -->     <script type="text/ng-template" id="warning-dialog.html">         <div class="modal-header">             <h3>you're idle. something!</h3>         </div>         <div class="modal-body" idle-countdown="countdown" ng-init="countdown=5">             <p>you'll 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 mouse , session 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>             idle long.  click button below redirected login page , begin again.             </p>         </div>         <div class="modal-footer">             <button type="button" class="btn btn-danger btn-small" data-ng-click="goback()">back login</button>         </div>     </script>     <!-- end templates modals --> 

first timer detects idle , warning pops , tells user, oops, need login. but, when hit refresh, refreshes page, {{ctrldash.userinfo.name}} empty.

this code ngidle

//this idle function             $scope.started = false;             $scope.ended = false;              $scope.events = [];             $scope.idle = 20; //this in actual seconds             $scope.timeout = 20; //this 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 function...")                 }             }              $scope.goback = function _goback() {                 closemodals();                 idle.unwatch();                 $window.location.href = $scope.templateviews.logout;             }; 

finally: goback() function, within controller = dashboardcontroller, throws error

unreferenced error, goback not defined.

those issues. love assistance, please. everyone.

i'm developing first angular app, not master means.. implemented logout functionality. when user attempts go page after logging out, controller checks presence of credentials, if none present, sent login page with:

`$location.path('/login');` 

--updated comment

i have 2 service modules (with factories). 1 - communicates rest endpoints, 2 - deals business stuff. when user logs in, on success, pass along user's info setcreds function.

var businessservice = angular.module('businessservice, ['ngcookies' ]); businessservice.factory('setcreds', ['$cookies', function ($cookies) {     return function(un, pw, userrole) {         var token = un.concat(":", pw);         $cookies.creds = token;         $cookies.usersrole = userrole; 

then, first thing check on controllers, before getting info needed view, checkcreds.

if (!checkcreds()) {            $location.path('/login'); } else { ..proceed getting stuff 

my checkcreds looks like:

businessservice.factory('checkcreds', ['$cookies', function ($cookies) {     return function () {         var returnval = false;         var creds = $cookies.creds;         if (creds !== undefined && creds !== "") {             returnval = true;         }         return returnval;     };}]); 

be sure inject businessservice app, , service factory want use controller.