AngularJS Timer

this is a small fiddle with a quite special timer

by Flavio Corpa

HTML

<div ng-controller="TimerCtrl">
    <form>
        <input type="text" placeholder="Minutes of the speak" ng-model="deadline"></input>
        <button ng-click="startTimer(deadline)" ng-disabled="timerRunning">Start</button>
        <button ng-click="stopTimer()" ng-disabled="!timerRunning">Stop</button>
        <button ng-click="turnRed()">Turn RED</button>
    </form>
    <div class="timer">
        <h1><timer interval="1000" autostart="false"/>{{hhours}}:{{mminutes}}:{{sseconds}}</h1>
        <p ng-class="timerColor.color">this text turns in red</p>
    </div>
</div>
<br/>

CSS

.timer {
    width: 50%;
    margin: 0 auto;
    font-size: 50px;
    font-family: Calibri;
}
.red {
	color:red;
}

JavaScript

var myApp = angular.module('MyApp', ['timer']);
myApp.controller('TimerCtrl', ['$scope', function($scope) {

    $scope.timerRunning = false;
    $scope.timerColor = {};

    $scope.startTimer = function (deadline){
        $scope.$broadcast('timer-start');
        $scope.timerRunning = true;
        //if ($scope.minutes == deadline)
            //alert("se acabĂł!!!");
    };

    $scope.stopTimer = function (){
        $scope.$broadcast('timer-stop');
        $scope.timerRunning = false;
    };

    $scope.turnRed = function (){
        $scope.timerColor.color = 'red';
    };
}]);