ScopeShow - digest

HTML

<div ng-app="app">
    <rootscope-show class="scope"></rootscope-show>
    <scope-show class="scope"></scope-show>
</div>

CSS

.scope {
    padding: 5px 20px;
}

.modifDataScopeBtn {
    cursor: pointer;
    text-decoration: underline;
    padding: 5px;
    margin: 0 10px;
    background-color: #ccc;
}

.addScopeChildBtn {
    cursor: pointer;
    padding: 5px;
    margin: 0 10px;
    background-color: #ccc;
}

JavaScript

angular.module('app', []);

angular.module('app').directive('rootscopeShow', [
    '$rootScope', 'RecursionHelperSrv',
    function($rootScope, recursionHelperSrv) {
        
        var template = [
            '<div class="scope">',
                'RootScope (nbDigest: <span class="digestSpan"></span>):',
                '<span class="modifDataScopeBtn">Modif data of rootscope</span>',
            '</div>'
        ].join('');
        
        var updateDigestNb = function updateDigestNb(element, nbDigest) {
            element[0].querySelector('span.digestSpan').innerHTML = nbDigest;
        };
        
        return {
            restrict: 'E',
            scope: {
            },
            template: template,
            replace: true,
            compile: function(element) {
                return recursionHelperSrv.compile(element, function(scope, element, attr) {
                    var nbDigest = 0;
                    updateDigestNb(element, nbDigest);
                    scope.data = 0;
                    
                    element[0].querySelector('span.modifDataScopeBtn').onclick = function() {
                        scope.data++;
                        $rootScope.$digest();
                    };
                    $rootScope.$watch(function() {
                        nbDigest = nbDigest + 1;
                        updateDigestNb(element, nbDigest);
                    });
                });
            }
        };
    }
]);

angular.module('app').directive('scopeShow', [
    'RecursionHelperSrv',
    function(recursionHelperSrv) {
        
        var template = [
            '<div class="scope">',
                '<span class="addScopeChildBtn" ng-click="addScope()">+</span>',
            'scope (nbDigest: <span class="digestSpan"></span>){{data}}:',
                '<span class="modifDataScopeBtn">Modif data of scope</span>',
                '<scope-show ng-repeat="child in children" class="scope">',
                '</scope-show>',
 ...