Customise countdown visualization

[Riccardo-Andreatta]

Is there the option to have a custom visualisation of the count down? For example, I have something like the following

<timer countdown="10041" max-time-unit="'minute'" interval="1000">{{days}} day{{daysS}}, {{hours}} hour{{hoursS}}, {{minutes}} minute{{minutesS}}</timer>

I would like that when there are no more days left, they disappear, and also the when there are no more hours left, and when there are no more minutes the seconds are shown.

I have tried to put them in a sort of ng-if statement but this solution does not work, so maybe I am doing something wrong?

<div ng-if="w">
    <timer countdown="10041" max-time-unit="'minute'" interval="1000">{{days}} day{{daysS}}, {{hours}} hour{{hoursS}}, {{minutes}} minute{{minutesS}}</timer>
</div>

<div ng-if="x">
    <timer countdown="10041" max-time-unit="'minute'" interval="1000">{{hours}} hour{{hoursS}}, {{minutes}} minute{{minutesS}}</timer>
</div>

<div ng-if="y">
    <timer countdown="10041" max-time-unit="'minute'" interval="1000">{{minutes}} minute{{minutesS}}</timer>
</div>

<div ng-if="z">
    <timer countdown="10041" max-time-unit="'second'" interval="1000">{{sseconds}} second{{secondsS}}</timer>
</div>

[siddii]

I think you might be running into a issue of multiple timer on the same page. Possibly scope collisions?

Can you try it without ng-if?

[Riccardo-Andreatta]

How can I achieve what I want without a ng-if? Is there any options to do that?