Simple AngularJs Countdown Timer

A Simple AngularJs Countdown Timer has come in handy a few times while making new products and slowly removing the dependency on jQuery. I originally wrote a countdown timer using jQuery, but with AngularJs that isn’t considered best practices. This is what the previous javascript looked like.


//Countdown timer starting at 3, then closes current window.
var _startCountdown = function(){
	var count = 3;
	var counter = setInterval(function () {
	count = count - 1;
	if (count <= 0) {
	  //Wait just a second then close tab.
	  setTimeout(function () {
	  }, 1000);
	}, 900);

This worked fine and served its purpose. However, with wanting to removed jQuery from within the angular controller, I decided to find a way to do this solely in AngularJs. It turned out to be quite easy.


var _startCountdown = function(){
	var timerCount = 3;

	var countDown = function () {
		if (timerCount < 0) {
		  //Any desired function upon countdown end.
		} else {
		  $scope.countDownLeft = timerCount;
		  $timeout(countDown, 1000);
	$scope.countDownLeft = timerCount;

Now, within your html you have access to a scope variable called {{ countDownLeft }}. Make sure to pass in $timeout into your controller.

2 thoughts on “Simple AngularJs Countdown Timer

Leave a Reply

Your email address will not be published. Required fields are marked *

StackOverflow Profile