how can i make an angular countdown in minutes?

Question

Here is my code but I can't find how to make the countdown in minutes, I mean, instead of 3000, 30:00... any help?

  <script>
  app.controller("Counter", function($scope,$timeout){
    $scope.counter = 3000;
    $scope.onTimeout = function(){
        $scope.counter--;
        mytimeout = $timeout($scope.onTimeout,1000);
    }
    var mytimeout = $timeout($scope.onTimeout,1000);
});
 </script>

Answer 1

Your controller is OK, you only need to:

• change 3000 to 1800 (30 minutes is 1800 seconds).
• add condition before decrementing counter to avoid turn around: if ($scope.counter > 0) $scope.counter--;

Now to display seconds as 'mm:ss' convert counter to date. You can use filter (from this answer)

app.filter('secondsToDateTime', [function() {
    return function(seconds) {
        return new Date(1970, 0, 1).setSeconds(seconds);
    };
}])

and display it like that:

{{counter | secondsToDateTime | date:'mm:ss'}}

See how it works in fiddle or in snippet below.

var myApp = angular.module('myApp', []);

function MyCtrl($scope, $timeout) {
  $scope.counter = 1800;
  $scope.onTimeout = function() {
    if ($scope.counter > 0) $scope.counter--;
    mytimeout = $timeout($scope.onTimeout, 1000);
  }
  var mytimeout = $timeout($scope.onTimeout, 1000);
}

myApp.filter('secondsToDateTime', [function() {
  return function(seconds) {
    return new Date(1970, 0, 1).setSeconds(seconds);
  };
}])

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