如何在更新范围后更新angularjs页面？

我编写了一个捕获键盘事件的指令,在某些键上我更新了作用域中的一些对象.我们的想法是上下移动一个数组并显示所选的行详细信息.问题是在我执行另一个更新页面的操作之前,页面不会更新.我怎么强迫这个？

这是指令:

LogApp.directive("keyCapture", [function(){
    var scopeInit;
    return{
        link: function(scope, element, attrs, controller){
            scopeInit = scope
            element.on('keydown', function(e){
                scopeInit[attrs.keyCapture].apply(null, [e]);                
            });
        }
    }
}]);

像这样绑定模板:

控制器方法:

$scope.movePreview = function(e){
    if ($scope.events.length === 0)
        return;
    // Find the element 
    if (e.keyCode === 38 || e.keyCode === 40){
        console.log("Pressed %s", e.keyCode);
        var offset = 0;
        if (e.keyCode === 38 && $scope.previewIndex > 0)
            offset = -1;
        else if (e.keyCode === 40 && $scope.previewIndex < $scope.events.length -1 )
            offset = 1;

        $scope.previewIndex += offset;
        var eventId = $scope.events[$scope.previewIndex].uuid;
        $scope.showEvent(eventId);
        e.preventDefault();
    }
};

$scope.showEvent(eventId)将获取具有给定ID的项目并将其显示在页面的另一部分中.在执行其他操作之前不会更新的部分,例如单击按钮.是否可以强制页面更新？

这是一个重现的小提琴:http://jsfiddle.net/gM2KF/1/ 如果你点击按钮,计数器就会更新.如果按任意键,则不显示任何内容.但是再次单击该按钮,您会看到计数器已被键盘事件更新,但未显示.