How can I convert a vanilla JS stop watch to a Angular one?

Question

new to JS and will delete if not allowed. I have got some regular JS code which I have been working with trying to switch this into a controller.

For the given example what would be the most optimised way. I have seen cases with directives, counters and so on however I am thinking this is very complicated for what I am doing. I have so far manage to bind seconds and tens to screen however I am having issues with the $interval for updating, do I require .watch, .promises .then? (sorry for newb question any help would be great)

JS Script

   window.onload = function() {

     var seconds = 00;
     var tens = 00;
     var appendTens = document.getElementById("tens");
     var appendSeconds = document.getElementById("seconds");
     var buttonStart = document.getElementById('button-start');
     var buttonStop = document.getElementById('button-stop');
     var buttonReset = document.getElementById('button-reset');
     var Interval;


     buttonStart.onclick = function () {

       clearInterval(Interval);
       Interval = setInterval(startTimer, 10);
     };

     buttonStop.onclick = function () {
       clearInterval(Interval);
     };


     buttonReset.onclick = function () {
       clearInterval(Interval);
       tens = "00";
       seconds = "00";
       appendTens.innerHTML = tens;
       appendSeconds.innerHTML = seconds;
       console.log("clear()");
     };


     function startTimer() {
       tens++;

       if (tens < 9) {
         appendTens.innerHTML = "0" + tens;
       }

       if (tens > 9) {
         appendTens.innerHTML = tens;

       }

       if (tens > 99) {
         console.log("seconds");
         seconds++;
         appendSeconds.innerHTML = "0" + seconds;
         tens = 0;
         appendTens.innerHTML = "0" + 0;
       }

       if (seconds > 9) {
         appendSeconds.innerHTML = seconds;
       }

     }

   };

This is how I am binding HTML to the screen

<span id="seconds">{{ seconds+":"+tens }}</span>

Answer 1

I have this set up with a simple $interval loop that updates the seconds and minutes:

angular.module('plunker', []).controller('MainCtrl', function($interval) {
  var interval_;

  this.seconds = 0;
  this.minutes = 0;

  this.start = function() {
    interval_ = $interval(function() {
      this.seconds++;
      if(this.seconds > 59) {
        this.seconds = 0;
        this.minutes++;
      }
    }.bind(this), 1000)
  }

  this.stop = function() {
    $interval.cancel(interval_)
  }
})
.filter('adjustTime', function(){
  return function(input) {
    if(input < 10) {
      return '0' + input;
    }
    return input;
  }
});

I'm a fan of delegation, so I made the filter you see to handle adding the extra 0 if it's less than 10; no need to muck up the $interval logic.

Plnkr