Timer stop watch in AngularJS I wrote a script for a timer. Is there any way to improve the code, with fewer number of lines?

JSBIN

var app = angular.module('app', []);
app.controller('main', function($scope, $interval) {

    $scope.timer = 0;
    var clickme = true,
        startfun;
    $scope.status = "Start";
    var foo = function() {
        $scope.timer += 1;
    };
    $scope.start = function() {
        if (clickme === true) {
            $scope.status = "Stop";
            clickme = false;
            startfun = $interval(foo, 1000);

        } else if (clickme === false) {
            clickme = true;
            $interval.cancel(startfun);
        }

    };
  $scope.reset=function(){

    $interval.cancel(startfun);
    $scope.timer = 0;
    $scope.status = "Start";
    clickme = true;
  };
});
Aside from the issue of setIntervals resolution/accuracy there's a lot of room for improvement in your angular.

angular.module('app', []);


"app" isn't a good name for your module "fruitjs.timer" would be better as it is more descriptive and has a much lower chance of naming clashes.



app.controller('main', function($scope, $interval) {


Again "main" isn't a great name for your controller "timerController" would be more explicit.



You should also utilise angular's support for safe minification:

app.controller('main', ['$scope', '$interval', function($scope, $interval) {
    // code
}]);


Notice that the second parameter is now an array declaring the names of the services/modules you require and finally your controller function (this is the recommended way).



More bad naming clickme, foo, startfun - none of these names mean anything.



$scope.status isn't the status at all - it's the potential action.



You don't need the clickme variable (which should at least be camel cased to clickMe). You have 2 potential actions "Start" and "Stop" - you don't need the additional boolean to track what state you're currently in.



Use either 2 or 4 spaces for your indentation - don't mix and match.



You don't change the label after you stop the timer.



Code with above changes

var app = angular.module('fruitjs.timer', []);
app.controller('timerController', [ '$scope', '$interval', function($scope, $interval) {
    var interval, incrementTimer, actions;
    actions = { start: "Start", stop: "Stop" };

    $scope.timer = 0;
    $scope.action = actions.start;

    incrementTimer = function() {
        $scope.timer += 1;
    };

    $scope.toggle = function() {
        if ($scope.action === actions.start) {
            $scope.action = actions.stop;
            interval = $interval(incrementTimer, 1000);

        } else if ($scope.action === actions.stop) {
            $scope.action = actions.start;
            $interval.cancel(interval);
        }
    };

    $scope.reset = function () {
        $interval.cancel(interval);
        $scope.timer = 0;
        $scope.action = actions.start;
    };
}]);




All you need to do now is solve the problem of keeping time accurately :)