In this experiment, we proved how fast you can build a very simple, custom countdown timer with AngularJS.

Check the Demo

This still isn’t a MVP (minimal viable product) but merely a concept, from which we will build the final and complete version of the Countdown timer.


This is a new version (from article “part2”):

Check the Demo Part 2


Version 1:

Check the Demo Part 1


This experiment will be done in 4 parts and the final version will contain:

  • Input field for hours, minutes and seconds that the user will choose
  • Message and “beep” sound at the end of the countdown

Stay tuned ’till next time, when the countdown will be more useful than this version.

The code in JS file:

 var myModule = angular.module("countdownApp", [/* No Dependency Injection */]);

myModule.controller("counterCtrl",['$scope','$timeout', function($scope,$timeout){

//Number to count from

$scope.counter = 100;
var stopped;

//timeout function
//1000 milliseconds = 1 second
//Every second counts

$scope.countdown = function() {
    stopped = $timeout(function() {
    }, 1000);

$scope.stop = function(){



Till next time, take care.