Progress Bar

HTML

<div ng-app="testmodule">
	<div ng-controller="statusCtrl as vm">
		<div progress-bar title="{{vm.bar1.title}}" value="vm.bar1.value" max="vm.bar1.max"></div>
		<div progress-bar title="{{vm.bar2.title}}" value="vm.bar2.value" max="vm.bar2.max"></div>
		<div progress-bar title="{{vm.bar3.title}}" value="vm.bar3.value" max="vm.bar3.max"></div>
		<div progress-bar title="{{vm.bar4.title}}" value="vm.bar4.value" max="vm.bar4.max"></div>
		<a class="btn btn-primary" ng-click="vm.reset()">Reset</a>
	</div>
</div>

SCSS

.progress {
    height: 40px;
	width:350px;
    margin-bottom: 15px;
    position: relative;
	
    &.zero {
    	.progress-black { width: 0 !important; }
    } 
    
	div { position: absolute; height: 20px }
    
	/* A white bottom layer */
    .progress-white {
        background: white;
        width: 100%;
        z-index: 1;
        box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.14), -2px -3px 2px -3px rgba(0, 0, 0, 0.14), 0 1px 6px 0 rgba(0, 0, 0, 0.06);
    }
	
    /* A black layer on top of the white bottom layer */
    .progress-black {
        background: black;
        transition: width .5s linear;
        z-index: 2;
    }
	
	/* A blue DIV over the scene with the blend-mode set to 'screen' */
    .progress-blue {
        background-color: #00a2e5;
        mix-blend-mode: screen;
        width: 100%;
        z-index: 4;
    }
	
    span { color: grey; display:block; background:none; }
	
    /* Some white text on top with blend-mode set to 'difference' */
    span.value {
        position: absolute;
        mix-blend-mode: difference;
		white-space: nowrap;
        top: 18px;
        left: 5px;
		margin-left:0;
		margin-right:0;
        color: white;
        z-index: 3;
        transition: left linear .5s;
    }
	
    
}

@-webkit-keyframes progress-bar {
   0% { width: 0; }
}
@-moz-keyframes progress-bar {
   0% { width: 0; }
}
@keyframes progress-bar {
   0% { width: 0; }
}

.btn {  padding:10px; color:white; background: #00a2e5; martin-top:15px; display:inline-block; }

JavaScript

(function() {
    'use strict';

    angular
        .module('testmodule', [])
		.controller('statusCtrl', statusCtrl)
        .directive('progressBar', progressBar);

	statusCtrl.$inject = ['$log'];
	function statusCtrl($log) {
		var vm = this;
		vm.reset = reset;
		
		vm.bar1 = {
			title: 'My Title',
			value: 5,
			max: 11
		};
		vm.bar2 = {
			title: 'My Title',
			value: 5,
			max: 10
		};
		vm.bar3 = {
			title: 'My Title',
			value: 0,
			max: 11
		};
		vm.bar4 = {
			title: 'My Title',
			value: 1,
			max: 11
		};
		
		function reset() {
			vm.bar1 = { title: 'My Title', value: 0, max: 11};
			vm.bar2 = { title: 'My Title', value: 0, max: 10};
			vm.bar3 = { title: 'My Title', value: 0, max: 11};
			vm.bar4 = { title: 'My Title', value: 0, max: 11};
		}
	};

    progressBar.$inject = ['$log', '$timeout'];
    /* @ngInject */
    function progressBar($log, $timeout) {
        var directive = {
            restrict: 'A',
            template: `<div class="progress" ng-class="isEmpty()">
							<span>{{title}}</span>
							<div class="progress-white"></div>
							<div class="progress-black" ng-style="{width:progress}"></div>
							<span class="value" ng-style="{left:leftPosition}">{{value}} / {{max}}</span>
							<div class="progress-blue"></div>
					</div>`,
            scope: {
                title: '@',
                value: '=',
                max: '='
            },
            link: link
        };

        return directive;

        function link(scope, element, attrs) {
            scope.isEmpty = isEmpty;
			scope.progress = 0;
			//function definition
			scope.setProgressWidth = setProgressWidth;

			let progressPercent = 0;

			scope.$watchGroup(['max','value'], function (newValue, oldValue) {
				$log.debug(newValue);
				setProgressWidth();
			});
			
            function isEmpty() {
                return scope.value ? '' : 'zero';
            }

            function setProgressWidth() {
				$timeout(function () {
					if (scope.value)...