show digital

Angular Clock Widget

Responsive, beautiful clocks for AngularJS built using SVG

Code on Github Download (latest)


This repository contains native AngularJS directives to render a clock face. The only required dependencies are:

Files to download

The easiest is to download with bower:

bower install angular-ui-clock --save 

Alternatively files can be downloaded downloaded from Github.

Whichever method you choose the good news is that the overall size is very small: <4kb for all directives (~1kb with gzip compression!)


<script src="bower_components/dist/angular-clock.js"></script>

As soon as you've got all the files downloaded and included in your page you just need to declare a dependency on the ds.clock module:

angular.module('myModule', ['ds.clock']);


You need to include a link to the css file in your page.

<link rel="stylesheet" href="bower_components/dist/angular-clock.css">

If you need the default digital clock font Syncopate, include this. Else check styling section to use your own font

<link href="//,700" rel="stylesheet" type="text/css">


There are several options that you can set as attributes on the directive element(can use other angular flavors like data-*, ng-attr-*, x-* also)

  1. start-time : init clock with specific time in milliseconds, (default: undefined)
  2. digital-format : digital clock format in angular date filter format (default: 'HH-mm-ss'). Pass as string enclosed in single quote or bound to a scope variable
  3. gmt-offset : shows time for the given GMT offset in clock, (default: false, shows local time) example: India -> 5.30, Singapore -> 8 , venezula -> -4.30, Nepal -> 5.45
  4. show-digital: shows digital clock, (default: true if both show-analog &show-digital are not set)
  5. show-analog : shows analog clock, (default: true if both show-analog &show-digital are not set)
  6. show-gmt-info : shows GMT offset value, (default: false) shows only if gmt-offset attribute is set
  7. theme : analog clockface theme, (default: light)

All clocks are responsive and reactive and will update automatically when data changes. start-time, digital-format, and gmt-offset are bound attributes and hence need to be set in the scope or using gmt-offset="'5.3'" format with extra single quotes.

show-digital, show-analog and theme can be used as bound attributes or as normal attributes

Default Clock
angular.module("app", ["ds.clock"]).controller("AppCtrl", function ($scope) {

Clock with Start Time
<ds-widget-clock start-time="startTimeValue"></ds-widget-clock>
angular.module("app", ["ds.clock"]).controller("AppCtrl", function ($scope) {
        $scope.startTimeValue = 1430990693334;

Clock with Timezone Offset
<ds-widget-clock gmt-offset="gmtValue" show-gmt-info></ds-widget-clock>
angular.module("app", ["ds.clock"]).controller("AppCtrl", function ($scope) {
        $scope.gmtValue = 5.3;
Clock with AM/PM in Dark theme
<ds-widget-clock theme="dark" digital-format="'hh:mm:ss a'"></ds-widget-clock>
<ds-widget-clock theme="theme" digital-format="'hh:mm:ss a'"></ds-widget-clock>
angular.module("app", ["ds.clock"]).controller("AppCtrl", function ($scope) {

        $scope.theme = 'dark';

Digital clocks

<ds-widget-clock data-show-digital digital-format="'HH:mm'"></ds-widget-clock>
<ds-widget-clock data-show-digital></ds-widget-clock>
<ds-widget-clock show-digital digital-format="'hh:mm:ss a'">></ds-widget-clock>
<ds-widget-clock show-digital digital-format="'hh:mm:ss a'"> gmt-offset="5.3" show-gmt-info></ds-widget-clock>
<ds-widget-clock show-digital digital-format="format">></ds-widget-clock>
<ds-widget-clock show-digital digital-format="'EEEE MMMM d,yyyy hh:mm:ss a Z'">></ds-widget-clock>
angular.module("app", ["ds.clock"]).controller("AppCtrl", function ($scope) {
        $scope.format = 'dd-MMM-yyyy hh:mm:ss a';
Analog clock
<ds-widget-clock show-analog></ds-widget-clock>
angular.module("app", ["ds.clock"]).controller("AppCtrl", function ($scope) {

Custom Analog Clock Theme

<!-- Theme blue-light is defined is css -->
<ds-widget-clock show-analog theme="blue-light"></ds-widget-clock> .clock-face {
  stroke: #153b6f;
  fill: #0e2434;
} .minor {
  stroke: #0089ff;
  stroke-width: 0.5;
} .major {
  stroke: rgba(119, 176, 242, 0.97);
  stroke-width: 0.5;
} .hour {
  stroke: rgba(119, 176, 242, 0.97);
  stroke-width: 1;
} .minute {
  stroke: #0089ff;
  stroke-width: 0.75;
} .second, .second-counterweight {
  stroke: rgb(234, 31, 54);
  stroke-width: 0.5;
} .second-counterweight {
  stroke-width: 1.5;
angular.module("app", ["ds.clock"]).controller("AppCtrl", function ($scope) {

Custom Digital Clock Theme

<!-- Theme blue-light is defined is css -->
<ds-widget-clock show-digital theme="blue-light" digital-format="'hh:mm:ss a'"></ds-widget-clock>

@import url('');
/* this import should be first line in css file else add as <link> in html*/ .digital {
  text-align: center;
} .time {
  font-family: 'Rationale', sans-serif;
  font-size: 3.0em;
  color: #1da4eb;
angular.module("app", ["ds.clock"]).controller("AppCtrl", function ($scope) {