css - How do I pause a Bootstrap progress bar width transition using Angular? -

i'm using bootstrap progress bar css transition run width 0 100%, @ same time $timeout running. when open confirm() box, $timeout pauses, css transition doesn't. there better way of linking 2 transition can paused well?

here code - listens start attribute change true.

.directive('mytimer', function($timeout){     return {         restrict: "e",         scope: {             duration: '@',             start: '@'         },         replace: true,         template: "<div class='progress'><div class='progress-bar' role='progressbar' style='-webkit-transition: width {{duration}}s linear; transition: width {{duration}}s linear'></div></div>",         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); })  ----  <my-timer duration="{{chosentime}}" start="{{timerstarted}}"></my-timer>