title: How do I pause a Bootstrap progress bar width transition using Angular?
body: <p>I'm currently using a Bootstrap progress bar with a css transition to run the width from 0 to 100%, at the same time as a $timeout is running. When I open a confirm() box, the $timeout pauses, but the css transition doesn't. Is there a better way of linking the two together so the transition can be paused as well?</p>
  
  <p>Here is my code - it listens for a start attribute to change to true.</p>
  
  <pre><code>.directive('myTimer', function($timeout){
      return {
          restrict: "E",
          scope: {
              duration: '@',
              start: '@'
          },
          replace: true,
          template: "&lt;div class='progress'&gt;&lt;div class='progress-bar' role='progressbar' style='-webkit-transition: width {{duration}}s linear; transition: width {{duration}}s linear'&gt;&lt;/div&gt;&lt;/div&gt;",
          link: function(scope, element, attrs){
              attrs.$observe('start', function(a){
                  if (a === 'true') {
                      $timeout(function(){
                          element.addClass('active');
                      }, 1);
                  }
              });
          }
      };
  })
  
  .controller('myController', function($scope){
      var chosenTimeSec = $scope.chosenTime * 1000;
      $scope.timer = $timeout(function(){
          $scope.finish();
      }, chosenTimeSec);
  })
  
  ----
  
  &lt;my-timer duration="{{chosenTime}}" start="{{timerStarted}}"&gt;&lt;/my-timer&gt;
  </code></pre>