Trying to understand AngularJS's $apply usage in the context of a setTimeout $broadcast

HTML

<div ng-controller='fooWriter'>
        <div>
            <a ng-click='submitFoo()' href='#'>broadcast foo</a>
        </div>
        <div>
            <a ng-click='submitFoo2()' href='#'>broadcast foo from setTimeout</a>
        </div>
    </div>

    <div ng-controller='fooListener'>
       {{content}}
    </div>

JavaScript

var module = angular.module('test', []);
    
    module.controller("fooWriter", function($scope, $rootScope) {
        var nextValue = 0;
        
        $scope.submitFoo = function() {
            $rootScope.$broadcast('fooChanged', ++nextValue);
        };
        
        $scope.submitFoo2 = function() {
            setTimeout(function() {
                $rootScope.$broadcast('fooChanged', ++nextValue);
            }, 0);
        };
    });
        
    module.controller("fooListener", function($scope) {
        $scope.content = "original";
        
        $scope.$on('fooChanged', function(e, value) {
            $scope.content = value;
        });
    });
    
    angular.bootstrap(document.querySelector('body'), ['test']);