Angular - needed digest

by dirtyd77

HTML

<script src="https://rawgit.com/lodash/lodash/2.4.1/dist/lodash.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.min.js"></script>
<div ng-app="myApp"
     ng-controller="AppCtrl as vm">
         
    <list items="vm.items"></list>
</div>

CSS

html, body {
    height:100%;
    width:100%;
}
p {
    background: red;
}

JavaScript

var app = angular.module('myApp', []);

window.vms = {};

app.controller('AppCtrl', AppCtrl);
AppCtrl.$inject = ['$scope'];

function AppCtrl($scope) {
    var vm = this;
    window.vms.appCtrl = vm;
    vm.items = ['Item1', 'Item2'];
};


app.controller('ListCtrl', ListCtrl);

ListCtrl.$inject = ['$scope'];

function ListCtrl($scope) {
    var vm = this;
    window.vms.listCtrl = vm;
    vm.items = $scope.items;
    setInterval(function (){
      vm.items.push('Item' + (vm.items.length + 1));  
        $scope.$digest();
    }, 2000);
}

app.directive('list', listDirective);

listDirective.$inject = [];

function listDirective() {
    var directive = {
        restrict: 'E',
        scope: {
            'items': '='
        },
        controller: 'ListCtrl',
        controllerAs: 'vm',
        template: [
            '<div ng-repeat="item in vm.items">',
            '<list-item name="item"></list-item>',
            '</div>'
        ].join('')
    };
    return directive;
}



app.controller('ListItemCtrl', ListItemCtrl);

ListItemCtrl.$inject = ['$scope'];

function ListItemCtrl($scope) {
    var vm = this;
    if(!window.vms.listItem) window.vms.listItem = [];
    window.vms.listItem.push(vm);
    vm.name = $scope.name;
    
    vm.changeName = function (){
      vm.name = vm.name+=Math.random();
        readVMs();
    };
}

app.directive('listItem', listItemDirective);

listItemDirective.$inject = [];

function listItemDirective() {
    var directive = {
        restrict: 'E',
        scope: {
            name: '='
        },
        controller: 'ListItemCtrl',
        controllerAs: 'vm',
        template: [
            '<p ng-click="vm.changeName();">',
            '{{vm.name}}',
            '</p>'
        ].join('')
    };
    return directive;
}

function readVMs(){
    for(var vmKey in window.vms){
     var vm = window.vms[vmKey];
        if(vm instanceof Array){
            vm.forEach(function (model){
               console.log(model); 
            });
 ...