Directive code :
app.directive('clock', ['dateFilter', '$timeout', function (dateFilter, $timeout) { return { restrict: 'E', scope: { format: '@', }, link: function (scope, element, attrs) { var updateTime = function () { //GET UTC DATE TIME BY USING MOMENT JS var now = moment(new Date()).utc().format('YYYY-MM-DD HH:mm:ss') //CREATED AT DATE TIME var then = attrs.time; //GET DIFFERENCT BETWEEN CURRENT UTC DATE TIME AND CREATED AT DATE TIME var ms = moment(now, "YYYY-MM-DD HH:mm:ss").diff(moment(then, "YYYY-MM-DD HH:mm:ss")); var d1 = moment.duration(ms); var curr_now = Math.floor(d1.asHours()) + moment.utc(ms).format(":mm:ss"); element.html(dateFilter(curr_now, scope.format)); $timeout(updateTime, curr_now % 1000); }; updateTime(); } }; }]);
HTML Code :
<clock time="{{data.create_datetime}}" format="HH:mm:ss"></clock>
It’s a good content for angular clock.
Thanks,
Milan