Angular Countdown Directive – iamrohit.in

body {
  font: 12px Arial;
  background: white;
}
a.gh {
  font-size: larger;
  font-weight: bold;
  text-decoration: none;
  background: blue;
  color: white;
  padding: 6px 14px;
  border-radius: 4px;
}
 
.countdown-con {
    text-align: center;
    font-size: 10px;
}
.countdown-xs {
    font-size: 9px;
}
.countdown-sm {
    font-size: 11px;
}
.countdown-md {
    font-size: 14px;
}
.countdown-lg {
    font-size: 20px;
}
.countdown .well {
    padding: 0;
    display: inline-block;
    width: 1.8em;
    line-height: 1.6em;
    border: 3px solid #54ABAE;
    box-shadow: none;
    background: white;
    margin: 3px auto;
    border-radius: 0;
}
.countdown h1 {
    font-size: 2.5em;
    font-weight: bold;
}
.countdown h2 {
    font-size: 1.6em;
    font-weight: bold;
    margin: 10px 0 5px;
}
.countdown h4 {
    font-size: 1.4em;
    font-weight: normal;
    text-transform: uppercase;
    margin: 0 0 5px;
    color: #54ABAE;
}
.countdown .row {
    white-space: nowrap;
}
.countdown .row-colons .col-xs-4:not(:last-child):after {
    content: ':';
    position: absolute;
    font-size: 4.7em;
    right: -0.17em;
    top: -0.12em;
    font-weight: normal;
    color: #54ABAE;
}
.countdown [class^="col-"] {
    float: none;
    display: inline-block;
    width: auto;
    padding: 0 8px;
    position: relative;
}
.countdown-con.orange .well {
    border-color: #FF9E15;
}
.countdown-con.orange h4 {
    color: #FF9E15;
}
.countdown-con.orange .row-colons .col-xs-4:not(:last-child):after {
    color: #FF9E15;
}

  (function() {
    angular.module('app', []);
    angular.module('app').controller('demoController', demoController);
 
    demoController.$inject = ['$scope']; 
    function demoController($scope) {
      var vm = this;
      vm.tomorrow = new Date();
      vm.tomorrow.setHours(24,0,0,0); // midnignt tomorrow
 
      vm.xmas = new Date();
      vm.xmas.setMonth(11);
      vm.xmas.setDate(25);
      vm.xmas.setHours(0,0,0,0); // midnignt
 
      vm.expired = {};
 
      vm.expiring = new Date();
      vm.expiring.setTime(vm.expiring.getTime() + 1000 * 10); // expiring in 10 seconds
 
      $scope.$on('countdown-expired', function(event, exp) {
        vm.expired[exp.name] = true;
      });
    }
 
    angular.module('app').controller('countdownController', countdownController);
    countdownController.$inject = ['$interval', '$scope']; 
 
    function countdownController($interval, $scope) {
      /* jshint validthis:true */
      var vm = this;
      vm.targetDate;  // targetDate is bound via the directive
      vm.countdownTitle; // title is bound via the directive
      vm.countdownId; // countdownId is bound via the directive
      vm.countdownTitleDisplay = vm.countdownTitle;
 
      if (vm.targetDate == '') {
        vm.targetDate = null;
      }
 
      vm.hasDate = !!vm.targetDate;
      if (!vm.hasDate) {
        vm.countdownTitleDisplay = vm.countdownTitle.replace("Coming In", '');
        return;
      }
 
      var endDate = new Date(vm.targetDate);
 
      vm.days;
      vm.hours;
      vm.minutes;
      vm.seconds;
 
      var msPerSecond = 1000;
      var msPerMinute = 60 * msPerSecond;
      var msPerHour = msPerMinute * 60;
      var msPerDay = msPerHour * 24;
      var stop;
 
      activate();
 
      function activate() {
        var timeDiff = endDate.getTime() - new Date().getTime();
        if (timeDiff <= 0) {
          vm.days = vm.hours = vm.minutes = vm.seconds = 0;
          stop && $interval.cancel(stop);
          stop = undefined;
          $scope.$emit('countdown-expired', { name: vm.countdownId });
          return;
        }
 
        vm.days = Math.floor(timeDiff / msPerDay);
        timeDiff -= vm.days * msPerDay;
        vm.hours = Math.floor(timeDiff / msPerHour);
        timeDiff -= vm.hours * msPerHour;
        vm.minutes = Math.floor(timeDiff / msPerMinute);
        timeDiff -= vm.minutes * msPerMinute;
        vm.seconds = Math.floor(timeDiff / msPerSecond);
      }
 
      stop = $interval(activate, msPerSecond);
    }
 
    angular.module('app').directive('countdown', countdown);
    countdown.$inject = [];
 
    function countdown () {
      // Usage:
      //     
      // Creates:
      // 
      return {
        restrict: 'E',
        templateUrl: '/dist/countdown.html',
        controller: 'countdownController',
        controllerAs: 'vm',
        scope: {
          targetDate: '=',
          countdownTitle: '@',
          countdownId: '@'
        },
        bindToController: true
      };
    }
})();