sarah sarah - 1 month ago 11
AngularJS Question

Adding auto refresh after a particular interval (5 seconds) in angular js

I have a page in which which has multiple tabs. I want to add the feature that the tab is reloaded automatically after a fixed duration. I have the following:

<uib-tab index="$index + 1" ng-repeat="environmentRegionTab in ctrl.environmentRegionTabs"
<div class="panel-body tab-content">
<div class="alert alert-success" ng-show="ctrl.deployStatus[].show">
<strong>Launched deployment with execution id


And the following controller:

export function ServiceDetailController(ecsServiceResponse, teamListResponse, productListResponse, businessSubOwnerListResponse, serviceInstancesResponse, businessOwnerListResponse, EcsService, SecretsService, $location, $stateParams, $uibModal, $scope, $state, $window) {
var self = this;
var serviceInstanceId;
self.ecsAuthControl = {};
self.initialize = _initialize;
self.clearMessages = _clearMessages();
self.onEnvironmentRegionSelect = _onEnvironmentRegionSelect;

$scope.reloadRoute = function() {

function _onEnvironmentRegionSelect(serviceInstanceId) {
self.selectedserviceInstanceId = serviceInstanceId;
if (serviceInstanceId) {
$'serviceInstanceId', serviceInstanceId);
} else {
$'serviceInstanceId', null);


I am not able to understand how to add the fixed time duration? I also would like to show a counter ticking down from 5 to 0 after which the page is reloaded. How can I do it? I declared the reload function but I am not able to figure out how to add a fixed timer? Thanks!

Answer Source

Make use of $interval service in angularjs:

$interval(function () {
}, 5000);

(make sure to pass $interval as a dependency to controller)

Example Plunker