Hi Khaleel,

Thanks for your kind words first!

Yes this issue has been solved by a customer of us. So here is what he did:

in directives.js he edited:

directive('xeCounter', function () {...

And modified with this code:

directive('xeCounter', function () {
    return {
        restrict: 'EAC',
        link: function (scope, el, attrs) {
            var $el = angular.element(el),
                sm = scrollMonitor.create(el);
            sm.fullyEnterViewport(function () {
                var opts = {
                        useEasing: attrDefault($el, 'easing', true),
                        useGrouping: attrDefault($el, 'grouping', true),
                        separator: attrDefault($el, 'separator', ','),
                        decimal: attrDefault($el, 'decimal', '.'),
                        prefix: attrDefault($el, 'prefix', ''),
                        suffix: attrDefault($el, 'suffix', '')
                    },
                    $count = attrDefault($el, 'count', 'this') == 'this' ? $el : $el.find($el.data('count')),
                    from = attrs.from ? attrs.from : 0,
                    to = attrs.to ? attrs.to : 100,
                    duration = attrs.duration ? attrs.duration : 2.5,
                    delay = attrs.delay ? attrs.delay : 0,
                    decimals = String(to).match(/\.([0-9]+)/) ? String(to).match(/\.([0-9]+)$/)[1].length : 0,
                    counter = new countUp($count.get(0), from, to, decimals, duration, opts);

                setTimeout(function () {
                    counter.start();
                }, delay * 1000);

                sm.destroy();
            });
        }
    };
}).

And the HTML:

<div class="xe-widget xe-counter" xe-counter data-count=".num" data-from="0" data-to="{{ data.starter }}" data-suffix="" data-duration="2">
    <div class="xe-icon"><i class="linecons-cup" /></div>
    <div class="xe-label"><strong class="num">{{ data.starter }}</strong><span>Starter</span></div>
</div>

This should work also for you.