Timeout request on page for redirect is unable to route to another angular view

Question

So I found this jquery plugin http://www.paulirish.com/2009/jquery-idletimer-plugin/ a where an automatic redirected occurs after x amount of seconds has passed. I wanted to incorporate this into one of views in angular however, I'm unable to use the ng route with jquery function. The programs runs but times out because jquery doesn't recognize "#" routing. If I put the original link of the view (main.html),this takes me to the page,but exits out of application.I also tried setting an iframe since I just want the pop up but I get an http error request

Session Expiration Warning

You've been inactive for a while. Click "Continue" to extend your session.

Your session will expire in 120 seconds.

Continue

  </div> </div> </div> </div> <div class="modal fade" id="mdlLoggedOut" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="static"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h4 class="modal-title">You have been automatically signed out</h4> </div> <div class="modal-body"> <p>Your session has expired.</p> </div> <div class="modal-footer"> </div> </div> </div> </div> <script> (function ($) { var session = { //Logout Settings inactiveTimeout: 10000, //(ms) The time until we display a warning message warningTimeout: 10000, //(ms) The time until we log them out minWarning: 5000, //(ms) If they come back to page (on mobile), The minumum amount, before we just log them out warningStart: null, //Date time the warning was started warningTimer: null, //Timer running every second to countdown to logout logout: function () { //Logout function once warningTimeout has expired //window.location = settings.autologout.logouturl; $(location).attr('href', 'main.html') }, //Keepalive Settings keepaliveTimer: null, keepaliveUrl: "", keepaliveInterval: 5000, //(ms) the interval to call said url keepAlive: function () { $.ajax({ url: session.keepaliveUrl }); } } ; $(document).on("idle.idleTimer", function (event, elem, obj) { //Get time when user was last active var diff = (+new Date()) - obj.lastActive - obj.timeout, warning = (+new Date()) - diff ; //On mobile js is paused, so see if this was triggered while we were sleeping if (diff >= session.warningTimeout || warning <= session.minWarning) { window.location.replace("#"); } else { //Show dialog, and note the time $('#sessionSecondsRemaining').html(Math.round((session.warningTimeout - diff) / 1000)); $("#timeout").modal("show"); session.warningStart = (+new Date()) - diff; //Update counter downer every second session.warningTimer = setInterval(function () { var remaining = Math.round((session.warningTimeout / 1000) - (((+new Date()) - session.warningStart) / 1000)); if (remaining >= 0) { $('#sessionSecondsRemaining').html(remaining); } else { session.logout(); } }, 1000) } }); // create a timer to keep server session alive, independent of idle timer session.keepaliveTimer = setInterval(function () { session.keepAlive(); }, session.keepaliveInterval); //User clicked ok to extend session $("#extendSession").click(function () { clearTimeout(session.warningTimer); }); //User clicked logout $("#logoutSession").click(function () { session.logout(); }); //Set up the timer, if inactive for 10 seconds log them out $(document).idleTimer(session.inactiveTimeout); })(jQuery); </script> 

Answer 1

Mixing jquery with angular is not a good idea. If you want to achieve url redirection after certain time period you can achieve this with approach below

var timeoutperiod;
var redirect = function (url){
   $window.location.href = url;
 };

if (timeoutperiod) {
      clearTimeout(timeoutperiod);
    }
timeoutperiod = setTimeout(redirect('url'), 5000);

Please make sure to inject $window into your controller.