title: Start/Stop/Resume all in one button with Angular Timer
body: <p>Using the pre-built "Angular Timer" directives available <a href="http://siddii.github.io/angular-timer" rel="nofollow">here</a> (scroll down to progress bar example), I'm trying to build a progress bar with a Start, Stop and Resume button all-in-one.
  Examples on their websites are made of two buttons and I would like to merge them.</p>
  
  <p>One solution could be to use innerHTML to get the current state ("Start" or "Stop") and a if condition in the controller.js but i'd like the button to be a icon-only-button switching from play to pause icon.
  An example from simple timer implementation is available <a href="http://siddii.github.io/angular-timer/examples.html#/angularjs-single-timer" rel="nofollow">here</a></p>
  
  <p>Here is my html</p>
  
  <pre><code>&lt;button class="button button-icon icon" ng-class="{'icon ion-play': !play, 'icon ion-pause': play}" ng-click="stopResumeTimer(this)"&gt;&lt;/button&gt;
  &lt;timer interval="1000" autostart="false"&gt;&lt;div class="progress"&gt; &lt;div class="bar" style="width: {{seconds}}%;"&gt;&lt;/div&gt; &lt;/div&gt;&lt;/timer&gt;
  </code></pre>
  
  <p>And the controller.js code with the if condition</p>
  
  <pre><code>$scope.stopResumeTimer = function(btn) {
      if (not yet started) {
          $scope.startTimer();
      }
      else if (already started) {
          $scope.stopTimer();
      }
      else {
          $scope.resumeTimer();
      }
  }
  </code></pre>
  
  <p>I am discouraged by the repeated failure on this, any help would be great! Thanks</p>