title: Re-instantiate AngularJS Timer
body: <p>I am working on an angular app that keeps track of multiple countdown timers. I need the timers to be re-instantiated when a user selects a new value from the dropdown. I have an alert in place to confirm that the method call is happening upon selecting a new value, but I do not know how to ensure the timer is re-instantiated. </p>
  
  <p>I am using this timer: <a href="http://siddii.github.io/angular-timer/" rel="nofollow">http://siddii.github.io/angular-timer/</a></p>
  
  <p>apps.js:</p>
  
  <pre><code>var app = angular.module('TestTimer', ['timer']);
  app.controller('OptionController', function() {
      this.Options = [{name: 'name1',attr1: 10, attr2: 15, attr3: 8, attr4: 22},{name: 'name2',attr1: 45,attr2: 45, attr3: 15, attr4: 60
  }];
      this.selectedOption = {name: 'Selected Option',attr1: 30, attr2: 45, attr3: 15, attr4: 60};
      this.isSelectedOption = function(name) {
          return this.selectedOption.name === name;
      };
      this.getOptions = function() {
          return this.Options;
      };
      this.getSelectedOption = function() {
          return this.selectedOption;
      };
      this.setSelectedOption = function(Option) {
          this.selectedOption = Option;
      };
  
      this.selectedTemplate = function() {
         alert(this.selectedOption.name);
      };
  });
  
  function TimerController($scope) {
      $scope.timerRunning = false;
  
      $scope.startTimer = function (){
          $scope.$broadcast('timer-start');
          $scope.timerRunning = true;
      };
  
      $scope.stopTimer = function (){
          $scope.$broadcast('timer-stop');
          $scope.timerRunning = false;
      };
  
      $scope.resetTimer = function() {
          $scope.$broadcast('timer-reset');
      }
  
      $scope.$on('timer-stopped', function (event, data){
          console.log('Timer Stopped - data = ', data);
      });
  
      $scope.$on('timer-tick', function(event, data) {
          console.log('Timer ticked -', data);
      });
  
      }
      TimerController.$inject = ['$scope'];
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;body ng-app="TestTimer"&gt;
  
      &lt;div ng-controller="OptionController as main"&gt;
          &lt;h1&gt;Test Timer&lt;/h1&gt;
          &lt;h3&gt;
              &lt;select ng-change='main.selectedTemplate()' ng-model="main.selectedOption" ng-class="form-control" ng-Options="Option.name for Option in main.Options" title="Options"&gt;
                  &lt;Option value=""&gt;Pick a Option&lt;/Option&gt;
              &lt;/select&gt;
          &lt;/h3&gt;
          &lt;div ng-controller="TimerController as timer"&gt;
              &lt;h3&gt;attr1: &lt;timer autostart="false" countdown="main.selectedOption.attr1" interval="1000" finish-callback="startTimer()"&gt;{{countdown}}&lt;/timer&gt;&lt;/h3&gt;
              &lt;h3&gt;attr2: &lt;timer autostart="false" countdown="main.selectedOption.attr2" interval="1000" finish-callback="startTimer()"&gt;{{countdown}} 
              &lt;/timer&gt;&lt;/h3&gt;
              &lt;h3&gt;attr3: &lt;timer autostart="false" countdown="main.selectedOption.attr3" interval="1000" finish-callback="startTimer()"&gt;{{countdown}}&lt;/timer&gt;&lt;/h3&gt;
              &lt;h3&gt;attr4 Launcher: &lt;timer autostart="false" countdown="main.selectedOption.attr4" interval="1000" finish-callback="startTimer()"&gt;{{countdown}}&lt;/timer&gt;&lt;/h3&gt;
              &lt;button ng-click="startTimer()" ng-disabled="timerRunning"&gt;Start Timer&lt;/button&gt;
              &lt;button ng-click="stopTimer()" ng-disabled="!timerRunning"&gt;Stop Timer&lt;/button&gt;
          &lt;/div&gt;
              attr-name: {{ main.selectedOption.name }} &lt;br /&gt;
              attr1: {{ main.selectedOption.attr1 }} &lt;br /&gt;
              attr2: {{ main.selectedOption.attr2 }} &lt;br /&gt;
              attr3: {{ main.selectedOption.attr3 }} &lt;br /&gt;
              attr4: {{ main.selectedOption.attr4 }} &lt;br /&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>EDIT: plunkr - <a href="http://plnkr.co/edit/TADnlLBdpDI0mxJuq23A?p=preview" rel="nofollow">http://plnkr.co/edit/TADnlLBdpDI0mxJuq23A?p=preview</a></p>