Angular progress-bar delay / or value updater

Question

I'm using the angular progress-bar directive in a table created with ng-repeat, along with a jquery table sorter plugin.

Problem is that the initial animation will not be done/shown at all; when user refresh a page, he will get tables with progresses already set to it's correct level / value.

If I change values later, with a dummy button, animation will be shown correctly.

My question is:

How can I delay the starting animation, in order to show the progress from 0 (some initial value) to some specific value - 64, eg

If you have a suggestion to use some different approach, don't hesitate to tell me, I'm open minded.

Answer 1

If anyone comes up with the similar problem, it might help him to use the angular $timeout service . Problem is that if you have a lot of progress bars, like me (200 + on a single page), you'll get issues with the performance, especially with users which don't use Google Chrome.

Here's the updated 'progressbar' directive:

.directive('progressbar', ['$transition', '$timeout', function($transition, $timeout) {
    return {
        restrict: 'EA',
        replace: true,
        scope: {
            width: '=',
            old: '=',
            type: '=',
            animate: '='
        },
        templateUrl: 'template/progressbar/bar.html',
        link: function(scope, element) {
            $timeout(function(){
                scope.$watch('width', function(value) {
                    if (scope.animate) {
                        element.css('width', scope.old + '%');
                        $transition(element, {width: value + '%'});
                    } else {
                        element.css('width', value + '%');
                    }
                });
            },100)

        }
    };
}]);