Hi All,
In this post we will discuss about to build clock using AngularJs. Angularjs provides a directive to build clock face and digital clock. This clock is responsive and auto updated when we change the data. To use this directive we need to download respective files.
We can download files through CLI:

bower install angular-ui-clock save

or

We can download files from Github and copy files from dist folder.
After download files we will include files in our index.html file.

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

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

Now, inject ds.clock dependency in app’s module.

angular.module('starter', ['ds.clock'])

Now, we will use "ds-widget-clock" directive in our view. This directive is responsive and reactive. Some attributes of this directive as follows:

•  start-time: We can initialize clock with desired time. This time should be in milliseconds.
• digital-format: What can be the format to show time by default it is 'hh:mm:ss'.
• gmt-offset: We can set timezone of clock.
•  show-gmt-info: It shows gmt-offset value only if gmt-off attribute is set.
• show-digital: To show digital clock. By default it set to true.
• show-analog: To show analog clock.
• theme: We can set a proper theme for clock using this attribute.

Full example:

index.html

<ion-view view-title="Smart Clock">
    <ion-content class="padding">
        <ds-widget-clock theme="theme" show-analog show-digital digital-format="'EEEE MMMM d,yyyy hh:mm:ss a Z'"></ds-widget-clock>
    </ion-content>
</ion-view>

controller.js

.controller('DashCtrl', function($scope){
    $scope.startTime = 1430990693334;
    $scope.theme = 'custom';
})

style.css

/* clock custom themes*/
.padding{padding-top:100px;}
.widget-clock.custom .clock-face {
  stroke: #FFF3C7;
  fill: #0e2434;
}
.widget-clock.custom .minor {
  stroke: #FFF3C7;
  stroke-width: 0.5;
}
.widget-clock.custom .major {
  stroke: #FFF3C7;
  stroke-width: 0.5;
}
.widget-clock.custom .hour {
  stroke: #FFF3C7;
  stroke-width: 1;
}
.widget-clock.custom .minute {
  stroke: #FFF3C7;
  stroke-width: 0.75;
}
.widget-clock.custom .second,
.widget-clock.custom .second-counterweight {
  stroke: rgb(234, 31, 54);
  stroke-width: 0.5;
}
.widget-clock.custom .second-counterweight {
  stroke-width: 1.5;
}
/*digital clock custom theme*/

.widget-clock.custom .digital {
  text-align: center;
  border:1px solid #ccc;
  padding: 10px;
}
.widget-clock.custom .time {
  font-family: 'Rationale', sans-serif;
  font-size: 2.0em;
  color: #EE8D2D;
  line-height: 1.5em;
}

Hope this will help you.