---
title: "How to use $interval service in AngularJS"  
description: "How to use $interval service in AngularJS"  
author: "Revati S Misra"  
published: 2024-05-15  
updated: 2024-05-15  
canonical: https://www.mindstick.com/forum/160657/how-to-use-interval-service-in-angularjs  
category: "angular js"  
tags: ["angular js", "angularjs service"]  
reading_time: 2 minutes  

---

# How to use $interval service in AngularJS

How to use $interval [service](https://www.mindstick.com/articles/105963/online-thesis-writing-service-for-college-kids-with-disabilities) in [AngularJS](https://www.mindstick.com/forum/33926/use-angularjs-without-scope-in-mvc)

## Replies

### Reply by Ashutosh Patel

In AngularJS, the **$interval** service is used to run a specified function repeatedly at a specified interval. It is similar to **setInterval** in JavaScript but integrated with AngularJS's digest cycle, which means it triggers AngularJS's digest cycle after each interval, ensuring that any changes to the scope are reflected in the view.

Step to use $**interval** service

**Inject $interval:** First, you need to inject the **$interval** service into your controller, service, or directive.

```javascript
angular.module('myApp').controller('myController', function($scope, $interval) {
    // Your controller logic here
});
```

**Using $interval**: Use the **$interval** service to set up an interval and specify the function to be executed and the interval duration in milliseconds.

```javascript
var myInterval = $interval(function() {
    // Code to be executed repeatedly
}, 1000); // Interval duration in milliseconds (e.g., 1000 ms = 1 second)
```

**Stopping the Interval:** You can stop the interval by calling the **$interval.cancel()** function and passing the interval promise returned by **$interval**.

```javascript
$interval.cancel(myInterval);
```

## Example-

```html
<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <title>$interval Service Example</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body>

<div ng-controller="myController">
    <div class="container">
        <p class="fw-semibold">Current Date is : {{currentDate}}</p>
        <p class="fw-semibold">Current Time is : {{currentTime}}</p>
        <!-- click button to stop time interval -->
        <button data-ng-click="stopInterval()" class="btn btn-primary p-2 px-3 rounded-3">Stop Interval</button>
    </div>
</div>

<script>
angular.module('myApp', [])
.controller('myController', function($scope, $interval) {
    // Function to update current time
    function updateTime() {
        $scope.currentTime = new Date().toLocaleTimeString();
    }

    // Update current time every second using $interval
    var myInterval = $interval(updateTime, 1000);

    // Stop interval automatically after 5 minute
    $interval(function() {
        $interval.cancel(myInterval);
    }, 500000);

    // show current date
    $scope.currentDate = new Date().toLocaleDateString();

    // function call when button clicked
    $scope.stopInterval = function(){
        $interval(function() {
            $interval.cancel(myInterval);
        }, 0);
    }
});

</script>
</body>
</html>
```


---

Original Source: https://www.mindstick.com/forum/160657/how-to-use-interval-service-in-angularjs

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.
