Redirect a user to a specific state after a certain amount of time
<p>I have a service that gives me the amount of milliseconds that the user can be logged in, <code>SecurityServices.getUserLoginDuration()</code>, this time duration is shown on top of all pages, so I have written a directive that displays this time.</p>

<pre><code>&lt;session-timeout value="60000"&gt;&lt;/session-timeout&gt;
</code></pre>

<p>or</p>

<pre><code> &lt;session-timeout value="$root.timeoutValue"&gt;&lt;/session-timeout&gt;
</code></pre>

<p>I use this piece of code to redirect user to login page after specific amount of time has passed:</p>

<pre><code>$scope.timeout = $scope.timeoutValue;

    $interval(decrementBySecond, 1000);

    $timeout(emitSessionTimeout, $scope.timeoutValue);

    function decrementBySecond() {
        $scope.timeout = $scope.timeout - 1000;           
    }

    function emitSessionTimeout() {
        $rootScope.$emit('SESSION_TIMEOUT');
    }
</code></pre>

<p>and in <code>run</code> block of my application I handle the <code>SESSION_TIMEOUT</code> event like this:</p>

<pre><code> app.run(handleTimeOut);

 function handleTimeout($rootScope, $state) {
        $rootScope.$on('SESSION_TIMEOUT', function () {
            $state.go('login');
        });
    }
</code></pre>

<p>timeout value should be refreshed on each state change so <code>$scope.timeout</code> in directive controller should be initialized to its initial value. how can I achieve this? </p>