title: activate $interval with an ng-click function
body: <p>I am trying to create a count down timer with AngularJS and <strong>$interval service.</strong></p>
  
  <p>I successfully have created a way to show a time and also have a successful countdown starting from 25 minutes going down to 0. </p>
  
  <p><strong>However I am finding it difficult to activate $interval inside a function scope?</strong>
  In other words I am trying to use $interval only when I call a function that stores it.</p>
  
  <p>In this code snippet, the timer starts when the page loads.</p>
  
  <pre><code>&lt;html&gt;
  
    &lt;head&gt;
      &lt;script data-require="jquery@2.1.4" data-semver="2.1.4" src="http://code.jquery.com/jquery-2.1.4.min.js"&gt;&lt;/script&gt;
      &lt;link data-require="bootstrap@3.3.1" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" /&gt;
      &lt;script data-require="bootstrap@3.3.1" data-semver="3.3.1" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"&gt;&lt;/script&gt;
      &lt;script data-require="angular.js@1.4.3" data-semver="1.4.3" src="https://code.angularjs.org/1.4.3/angular.js"&gt;&lt;/script&gt;&lt;!-- AngularJS --&gt;
      &lt;script&gt;
          var myapp = angular.module('MyApp', []);
          myapp.controller('timer',['$scope', '$interval', function($scope, $interval){
  
  
            $scope.starttime = 1500000; // 25min in ms
            $scope.format = 'mm:ss'; //minutes and seconds format 
  
             $interval(function(){
                $scope.starttime;
                $scope.starttime -=1000; //starttime is equal to starttime - 1 second
                /*if($scope.starttime === 0){
                  $scope.starttime = 1500000;
                }
                */
              },1000);
              //return start;
            //}; //end starttimer function
  
            $scope.killtimer = function(){
  
            }
  
  
          }]);
  
      &lt;/script&gt;
    &lt;/head&gt;
  
    &lt;body ng-app="MyApp"&gt;
      &lt;div class="container"&gt;
        &lt;div class="row"&gt;
          &lt;div class="col-sm-12"&gt;
            &lt;h1 ng-controller="timer"&gt;{{ starttime | date:format}}&lt;/h1&gt; &lt;!-- start time with format filter --&gt;
            &lt;button class="btn btn-primary" ng-click="starttimer()"&gt;Start&lt;/button&gt;
            &lt;button class="btn btn-danger" ng-click="killtimer()"&gt;End Timer&lt;/button&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  
  
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>However I want  to wrap the $interval inside a $scope.starttimer function so I can call it with ng-click and a button on the DOM. Here is my unsuccessful attempt at that version.</p>
  
  <pre><code>&lt;html&gt;
  
    &lt;head&gt;
      &lt;script data-require="jquery@2.1.4" data-semver="2.1.4" src="http://code.jquery.com/jquery-2.1.4.min.js"&gt;&lt;/script&gt;
      &lt;link data-require="bootstrap@3.3.1" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" /&gt;
      &lt;script data-require="bootstrap@3.3.1" data-semver="3.3.1" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"&gt;&lt;/script&gt;
      &lt;script data-require="angular.js@1.4.3" data-semver="1.4.3" src="https://code.angularjs.org/1.4.3/angular.js"&gt;&lt;/script&gt;&lt;!-- AngularJS --&gt;
      &lt;script&gt;
          var myapp = angular.module('MyApp', []);
          myapp.controller('timer',['$scope', '$interval', function($scope, $interval){
  
            $scope.starttime = 1500000; // 25min in ms
            $scope.format = 'mm:ss'; //minutes and seconds format 
            $scope.starttimer = function($scope){
             $interval(function(){
                $scope.starttime;
                $scope.starttime -=1000; //starttime is equal to starttime - 1 second
                /*if($scope.starttime === 0){
                  $scope.starttime = 1500000;
                }
                */
              },1000);
              //return start;
            //}; //end starttimer function
  
            $scope.killtimer = function(){
  
            }
  
  
          }]);
  
      &lt;/script&gt;
    &lt;/head&gt;
  
    &lt;body ng-app="MyApp"&gt;
      &lt;div class="container"&gt;
        &lt;div class="row"&gt;
          &lt;div class="col-sm-12"&gt;
            &lt;h1 ng-controller="timer"&gt;{{ starttime | date:format}}&lt;/h1&gt; &lt;!-- start time with format filter --&gt;
            &lt;button class="btn btn-primary" ng-click="starttimer()"&gt;Start&lt;/button&gt;
            &lt;button class="btn btn-danger" ng-click="killtimer()"&gt;End Timer&lt;/button&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  
  
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>This version doesn't work. The AngularJS breaks!!?? Not sure why.</p>
  
  <p>Here is a link to a <a href="http://plnkr.co/edit/4Eo7sBf8rANQyulnC2WG?p=preview" rel="nofollow">plnkr</a></p>