Stop countdown angularjs

Question

I've this code and I want to stop the countdown when when it reaches 00:00. I want to use $interval.cancel(); but I don't know how to use it.

My code is here :

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $interval) {
     $scope.counter = 10;   
     $interval(function(){console.log($scope.counter--)},1000);
});
app.filter('counter', [function() {
    return function(seconds) {
        return new Date(1970, 0, 1).setSeconds(seconds);
    };
}])

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
<p>{{counter | counter | date:'mm:ss'}}</p>
</div>

Answer 1

Add condition like counter != 0 and clear the interval.

According to $interval you need the promise to cancel interval.

    var app = angular.module('myApp', []);
    app.controller('myCtrl', function($scope, $interval) {
         $scope.counter = 10;
         var intervalTime=null;   
         intervalTime= $interval(function(){console.log($scope.counter--); 
         if($scope.counter == 0){
              $interval.cancel(intervalTime);
              intervalTime = null;
         }
},1000);
    });
    app.filter('counter', [function() {
        return function(seconds) {
            return new Date(1970, 0, 1).setSeconds(seconds);
        };
    }])

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
<p>{{counter | counter | date:'mm:ss'}}</p>
</div>