angular timer unable start multiple timers separatly

Question

I use ng-repeat in uib-tabset and in each tab is timer. Each timer has a Start button so each timer can be started on some action.

<uib-tabset active="activeTab">
<uib-tab ng-repeat="question in vm.QuestionsList" index="question.Index" disable="question.disabled">
    <uib-tab-heading>
        Q{{question.Index}}
    </uib-tab-heading>

    <timer countdown="question.TimeForQuestionInSeconds" interval="1000" finish-callback="vm.questionTimeOut()" autostart="false" id="q{{question.Index}}-timer">
        Remaining time : {{countdown}} second{{secondsS}} <br />
        <div class="progress progress-striped active {{displayProgressActive}}" style="height: 15px;"><div class="bar" style="width: {{progressBar}}%;"></div> </div>
    </timer>

    <button type="button" class="btn btn-default btn-sm" ng-click="vm.startTimer()" ng-disabled="vm.TimerRunning">Start</button>
</uib-tab>
</uib-tabset>

in my controller I have this function:

public startTimer() {
            this.$scope.$broadcast('timer-start');
            this.TimerRunning = true;
        }

but it start all my timers. I found this solution here https://github.com/siddii/angular-timer/issues/166

document.getElementById('q1-timer').start();

But I get this error Uncaught TypeError: document.getElementById(...).start is not a function and dont know why. Is there any other way?