为什么不在指令中首先调用日志

Question

我有这样的指令

angular.module('myDirective',[])

.directive('inputBox',function(){
    return{
        restrict:"E",
        controller:['$scope','$element',function($scope,$element){
            $scope.printMessage = function(e){
                // $scope.inputval = 'Enter input here';
                // callback(e);
                console.log('this should be called 1st');
                $scope.onButtonClicked({widgetEvent:e});
            };
        }],
        scope:{
            buttonName:"@",
            printedMessage:"@",
            onButtonClicked:"&"
        },
        template:'<input type="text" ng-model="inputval"><button ng-click="printMessage($event)">{{buttonName}}</button>'
    };
})

在另一个控制器中，我将函数声明设为

angular.module('myApp',['myDirective'])
.controller('myController',['$scope',function($scope){
    $scope.showAlertMessage = function(e){
        alert('this is a alert');
    };
}]);

为什么我的警报会被调用，然后是printMessage中的console.log，如何避免这种情况。