Angular: Empty Fiddle

http://angularjs.org/

by itamark

HTML

<script src="http://code.angularjs.org/angular-1.0.1.js"></script>
<div ng-controller="MyCtrl">
    <table>
        <tr ng-hide="$scope.settings.running">
            <td><input ng-model="hours"></td>
            <td><input ng-model="minutes"></td>
            <td><input ng-model="seconds"></td>
        </tr>
        <tr ng-hide="!$scope.settings.running">
            <td>{{hours}}</td>
            <td>{{minutes}}</td>
            <td>{{seconds}}</td>
        </tr>
    </table>
    
    
    
    <button ng-click="start()">Start</button>
    <button ng-click="stop()">Stop</button>
</div>

JavaScript

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

function MyCtrl($scope, $timeout) {
    $scope.hours = 1;
    $scope.minutes = 1;
    $scope.seconds = 1;
    $scope.settings = {
        running:false
    }
    
    $scope.stop = function() {
    $scope.settings.running = false;
    }
    
    $scope.start = function(){
$scope.settings.running = true;
        $scope.countdown();
    }
    
    $scope.countdown = function myhandler() {
        if($scope.settings.running == true){
         console.log('call');
        if ($scope.hours == 0 && $scope.seconds == 0 && $scope.minutes == 0) {
            console.log('end!');
            return;
        } else {
            if ($scope.hours == 0 && $scope.minutes == 0 && $scope.seconds == 1){
            $scope.seconds = 0;
            }
            else{
            if ($scope.seconds == 0) {
                $scope.seconds = 59;
                $scope.minutes--;
            } else {
                $scope.seconds--;
            }
            
            if($scope.minutes == 0){
                $scope.minutes = 59;
                if($scope.hours !== 0){
                $scope.hours--;
                }
                
            }
}
        }
        $timeout(myhandler, 1000);
        }
       return;
    }
}