Angular breadcrumb with ui router resolve interpolation

breadCrumbs.directive.js

(function () {

    'use strict';

    const template = '<ol class="breadcrumb">' +
            '<li ng-repeat="c in crumbs">' +
            '<a ui-sref="{{c.name}}">{{c.label}}</a>' +
            '</li>' +
            '</ol>';

    /*@ngInject*/
    function breadCrumbs($rootScope, $state, $interpolate) {

        return {
            scope: null,
            restrict: 'A',
            template: template,
            link: function (scope, element) {
                
                scope.crumbs = [];

                $rootScope.$on('$viewContentLoaded', function (event, toState, toParams, fromState, fromParams) {

                    var current = $state.$current;
                    var crumbs = [];
                    while (current.parent) {
                        
                        var label = current.self.breadcrumb ? current.self.breadcrumb.label : null;
                        if (label) {
                            let p = $interpolate(label);
                            crumbs.push({
                                label: p(current.locals.resolve.$$values),
                                name: current.self.name
                            });
                        }

                        current = current.parent;
                    }

                    scope.crumbs = crumbs.reverse();

                });

                
            }
        };

    }

    module.exports = breadCrumbs;

})();