ttimer.directive.js

(function(){

  angular.module('mnt')
    .directive('tTimer', function() {
      return {
        template: [
          '<div class="tpreload">',
          ' <div style="width:{{$ctrl.percent}}%"></div>',
          '</div>'
        ].join("\n"),
        scope: {
          duration: '@',
          callback: '&'
        },
        controller: tTimerCtrl,
        controllerAs: '$ctrl',
        bindToController: true
      };
    });

    /** @ngInject */
    function tTimerCtrl($log, $timeout, $scope, $interval) {
      var vm = this;
      //$log.log("Ttimer: ", this.duration);
      //$log.log(this.callback);
      var time = parseInt(this.duration);

      var t = $timeout(function(){
        vm.callback();
      }, time);

      var start = new Date().getTime();
      function elapsed() {
        return (new Date().getTime() - start)
      }

      var inter = $interval(function(){
          vm.percent = (elapsed()/time) * 100
          //$log.log(vm.percent);
      }, 10);



      $scope.$on("$destroy", function(){
        $log.log("Directive destroyed..");
        $timeout.cancel(t);
        $interval.cancel(inter);
      });

    }


})();

Per inicialitzar-la:

<t-timer duration="4000" 
      callback="$ctrl.next()"></t-timer>