$apply already in progress when sending a click event to a button?

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.27/angular.min.js"></script>
<body ng-app="myApp" ng-controller="testCtrl" ng-keydown="key($event);">
    <button id="viewQuestions" type="button" ng-click="isButtonClicked = !isButtonClicked; test();"> Test</button>
    Is Button Clicked {{isButtonClicked}}
</body>

JavaScript

var app = angular.module('myApp', []);
app.controller('testCtrl', function ($scope, $timeout) {
    $scope.test = function(){
        alert('clicked');
    };
    
    $scope.isButtonClicked = false;
    
    $scope.key = function ($event) {
        $scope.$broadcast('key', $event.keyCode)
    }
    
    $scope.$on('key', function (e, key) {
        if (key == 13) {
            if (true) { //ts.test.current && ts.test.userTestId
                $timeout(function(){
                    angular.element(document.getElementById("viewQuestions")).trigger('click');
                });
            }               
        }
    });
});