AngularJS: element state observation

HTML

<div ng-app="app" ng-controller="ctrl">
    <p ng-hide="hidden" watch-state>some text</p>
    <a href="javascript:void(0)" ng-click="toggle()">show/hide</a> / <a href="javascript:void(0)" ng-click="callDigest()">Call digest</a>
    <div ng-controller="logger">
        <p ng-repeat="item in log">{{item.text}}</p>
    </div>
</div>

JavaScript

angular.module('app', []).controller('ctrl', function($scope) {
    $scope.hidden = true
    
    $scope.toggle = function() {
        $scope.hidden = !$scope.hidden
    }
}).controller('logger', function($scope, $rootScope) {
    $scope.log = []
    
    $scope.$on('log', function($event, $data) {
        $scope.log.push({'id': $scope.log.length, 'text': $data})
    })
}).directive('watchState', function($rootScope) {
    return {
        restrict: 'A',
        controller: function($scope, $element) {
            // show. that state was changed by outer source.
            // prevent action when no changes in $digest cycle
            var toggled = false
            
            $scope.$watch(function() {
                if ($element.hasClass('ng-hide')) {
                    if (!toggled) {
                        toggled = true
                        $rootScope.$broadcast('log', 'text is hidden')
                    }
                } else {
                    if (toggled) {
                        toggled = false
                        $rootScope.$broadcast('log', 'text is visible')
                    }
                }
            })
        }
    }
})