title: AngularJS - Can't cancel $interval after initiating it twice
body: <p>I'm new to programming, and have recently been playing around with AngularJS.</p>
  
  <p>To practice, i've decided try and create a simple stopwatch.</p>
  
  <p>Starting with an initial 'time' value of 0, i'm using $interval to increment the 'time' by 0.01, every 10 milliseconds. I can start and stop the stopwatch without any issues, <strong>UNLESS</strong> i click 'Start' twice. After doing so, 'Stop' no longer works.</p>
  
  <p>I'm sure this is an awful way to create a stopwatch, but regardless, the issue still remains. </p>
  
  <p>My html contains the timer and 'Start' and 'Stop' buttons, like so:</p>
  
  <pre><code>&lt;div class="row" style="margin-left: 20px" ng-controller="timerCtrl"&gt;      
    &lt;b&gt;{{time | number : 2}}&lt;/b&gt;
    &lt;button ng-click="startTimer()"&gt;Start&lt;/button&gt;
    &lt;button ng-click="stopTimer()"&gt;Stop&lt;/button&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And the js: </p>
  
  <pre><code>.controller('timerCtrl', ['$scope', '$timeout', '$interval',
    function($scope, $timeout, $interval) {
  
    $scope.time = 0;       
  
    $scope.startTimer = function() {
      $scope.counter = $interval(function(){
      $scope.time += 0.01;
      }, 10)  
    }
  
    $scope.stopTimer = function() {
      $interval.cancel($scope.counter);
    }
   }
  ])
  </code></pre>
  
  <p>What's the best way to solve this? Any help will be much appreciated, thanks!</p>