Shikha thakur Shikha thakur - 4 months ago 9
CSS Question

binding scope from html to the directive while doing ng-repeat and performing action which doesnt reflect back in html

I have a required where i need to show the timer countdown for each and every person.
i wrote a directive which takes the doi(date of interview) from the html and perform some countdown operation in directive controller and update the timer every second.
Here is the html code :

<div class="panel panel-default" ng-repeat="candidateInfo in aCandidateDetails">
<div class="panel-heading">
<div class="row">
<div class="col-xs-1">
<a style="cursor:pointer">
<div stop-watch time="candidateInfo.doi"></div>

directive code:

.directive('stopWatch', function() {
return {
restrict: 'A',
replace: false,
scope: {
time: "="
controller: function($scope) {
$scope.getTimeRemaining = function(endtime) {
$scope.t = Date.parse(endtime) - Date.parse(new Date());
$scope.seconds = Math.floor(($scope.t / 1000) % 60);
$scope.minutes = Math.floor(($scope.t / 1000 / 60) % 60);
$scope.hours = Math.floor(($scope.t / (1000 * 60 * 60)) % 24);
$scope.days = Math.floor($scope.t / (1000 * 60 * 60 * 24));
return {
'total': $scope.t,
'days': $scope.days,
'hours': $scope.hours,
'minutes': $scope.minutes,
'seconds': $scope.seconds

$scope.initializeClock = function(endtime) {
$scope.clock = document.getElementById('clockdiv');
$scope.daysSpan = $scope.clock.querySelector('.days');
$scope.hoursSpan = $scope.clock.querySelector('.hours');
$scope.minutesSpan = $scope.clock.querySelector('.minutes');
$scope.secondsSpan = $scope.clock.querySelector('.seconds');

$scope.updateClock = function() {
$scope.t = $scope.getTimeRemaining(endtime);

$scope.daysSpan.innerHTML = $scope.t.days;
$scope.hoursSpan.innerHTML = ('0' + $scope.t.hours).slice(-2);
$scope.minutesSpan.innerHTML = ('0' + $scope.t.minutes).slice(-2);
$scope.secondsSpan.innerHTML = ('0' + $scope.t.seconds).slice(-2);

if ($ <= 0) {

$scope.timeinterval = setInterval($scope.updateClock, 1000);

templateUrl: './views/stopWatchView.html'


templete html code :

<div id="clockdiv">
<div class="tiles">
<span class="days"></span>
<span class="hours"></span>
<span class="minutes"></span>
<span class="seconds"></span>
<div class="labels">

problem what im facing here is every time it is updating the 1st ng-repeat row.
it is not showing anything for the other rows.

Any help is appreciated.


This is probably caused by the line:

$scope.clock = document.getElementById('clockdiv');

An ID is expected to occur only once on a page. On each pass of ngRepeat, you start by requesting "the" clockdiv element, when you want "a" clockdiv element.

That said, a more angular-type approach would be to not update the innerHTML of your spans by hand, but instead bind to the scope parameters, like this:

<div class="tiles">
    <span class="days" ng-bind="t.days"><!-- this will bind to $scope.t.days --></span>
    <span class="hours" ng-bind="t.hours"><!-- this will bind to $scope.t.hours --></span>
    <span class="minutes" ng-bind="t.minutes"><!-- this will bind to $scope.t.minutes --></span>
    <span class="seconds" ng-bind="t.seconds"><!-- this will bind to $scope.t.seconds --></span>

And hey presto! Your clocks are automatically updated each time you update the scope variables, and you don't need references to elements in your code anymore. The line:

$scope.t = $scope.getTimeRemaining(endtime);

will be enough to update your page.