AngularJS timer with start and stop button

//............timer...........................
   //timer with interval
   $scope.timerWithInterval = 0;
   $scope.total;
    $scope.startTimerWithInterval = function() {
     $scope.timerWithInterval = 0;
     if($scope.myInterval){
       $interval.cancel($scope.myInterval);
     }
     $scope.onInterval = function(){
         $scope.timerWithInterval++;
         $scope.total=$scope.timerWithInterval;
     }
     $scope.myInterval = $interval($scope.onInterval,1000);
   
     console.log("timerWithInterval",$scope.myInterval);
   };
 
   $scope.resetTimerWithInterval = function(){
   var da=$filter('date')($scope.total,'hh:mm:ss');
   console.log("$scope.da",$scope.total | hhmmss);
   console.log("$scope.total",$scope.total);
     $scope.timerWithInterval = 0;
     $interval.cancel($scope.myInterval);
   }



}]);
//....should outside of the controller..
app.filter('hhmmss', function () {
  return function (time) {
    var sec_num = parseInt(time, 10); // don't forget the second param
    var hours   = Math.floor(sec_num / 3600);
    var minutes = Math.floor((sec_num - (hours * 3600)) / 60);
    var seconds = sec_num - (hours * 3600) - (minutes * 60);

    if (hours   < 10) {hours   = "0"+hours;}
    if (minutes < 10) {minutes = "0"+minutes;}
    if (seconds < 10) {seconds = "0"+seconds;}
    var time    = hours+':'+minutes+':'+seconds;
    return time;
  }
});


....html to start and stop timer
  <p ng-bind="timerWithInterval">Timer with interval: {{timerWithInterval | hhmmss}}</p>
  <button ng-click="startTimerWithInterval()">Start Timer</button>
  <button ng-click="resetTimerWithInterval()">reset tiemr</button>