Angular ui-bootstrap progressbar with angular-timer not showing value

Question

Please help. I am fresh out of sanity.

See codepen here for an example.

I have a <timer> from angular-timer that exposes seconds on to the local scope and updates it every second, which is pretty nice. Something like this:

<timer> {{seconds}} </timer>

So, I thought it would also be pretty nice to then use a <progressbar> from angular-ui-bootstrap and have it update the value on each tick. So, I've gone and done something like this:

<timer>
  <progressbar value="seconds"></progressbar>
</timer>

This, much to my amazement, does not work.

So, I went ahead and thought about it for what seems like two full days. That's probably because it's been two days of banging away at this and I still have no idea what in the world is going on. Anyway, I thought "hey, maybe somehow seconds isn't reeeeeally exposed on the scope, so let's find out if it is, OK? OK." (maybe talking to myself isn't helping.)

So, I proceeded to type these things:

<timer>
  {{seconds}}
  <progressbar value="seconds"></progressbar>
</timer>

and there they are, in all their glory, the seconds. On my page. Just not in my progressbar. Where I want them. Of course.

So, seconds is definitely exposed on the scope.

Then, I thought "okay. Seconds is on the scope. Maybe progressbar has an isolated scope that isn't inheriting seconds or something. Maybe. But no. I do not believe this is the case. That would make too much sense.

Any help would be like an oasis in a vast desert of frustration.

Answer 1

It doesn't work because <timer/> is not isolating the seconds object and therefore not exposing it to outside of its scope, while <progressbar/> isolates the value object.
To make it work with a common scope you can use the timer-tick event that is fired according to the interval that is defined on the by the timer - and register to this event later Updated codepan

<div ng-controller="customCtrl">
  <timer interval="1000">
    {{seconds}}
    <progressbar value="timerSeconds"></progressbar>
  </timer>
</div>

app.controller('customCtrl', function($scope) {
 $scope.$on('timer-tick',function(e, val) {
   $scope.timerSeconds = (Math.floor(val.millis / 1000));
 }); 
});

Answer 2

You do not need to use progressbar directive in this case, as there is no javascript in the bootstrap implementation :

<timer start-time='start' end-time='end'">
   <div class="progress">
      <div class="progress-bar" role="progressbar" aria-valuemin="0" aria-valuemax="100" style="width:{{ 100 - (100 * millis/(endTime - startTime)) | number:0}}%;">
      </div>
   </div>
 </timer>

Note : the example given in the angular-timer docmentation does not work if you use bootstrap 2. For bootstrap 3, you should use code above