Angular JS-点击加载控制器功能

我正在创建一个带有angular的小型活动应用程序来练习。目前，我已经用Laravel 5.1创建了一个应用程序，并用JSON返回了一些URL。我在我的工厂中为事件加载这些URL。这些事件将使用Angular进行渲染。在它们被渲染后，一个带有"显示信息"的按钮将被放置，当你点击它时，我想调用EventController中的一个函数，这样我的$scope.event将接收新数据。我的控制器有一个函数$scope.getEvent（eventID）；但我不知道如何在点击时运行该功能。

//Controller
app.controller('EventController', ['$scope', 'eventFactory', '$http', function ( $scope, eventFactory, $http )
{
    eventFactory.getEvents(1).then(function(response){
        $scope.events = response.events;
        $scope.eventPaginator = response.pagination;
    });
    $scope.getEvent = function(value){
        console.log('trigger');
        eventFactory.getEvent(value).then(function(response){
            $scope.event = response;
        });
    };
    $scope.loadPage = function(page){
        eventFactory.getEvents(page).then(function(response){
            $scope.events = response.events;
            $scope.eventPaginator = response.pagination;
        });
    };

}]);
//Directive
app.directive('event', function() {
    return {
        restrict: 'E',
        scope: {
            data: '=',
            loadEvent: '&',
        },
        templateUrl: '/assets/website/angular/views/event.html',
        link: function(scope, element){
            scope.loadEvent(function(){
                alert('Click')
            });
        },
    };
});
//Factory
app.factory('eventFactory', ['$http', function ( $http )
{
    return {
        getEvents: function (page)
        {
            return $http.get('/api/v1/events?page='+page)
                    .then(function ( response )
                    {
                        return response.data;
                    });
        },
        getEvent: function (id)
        {
            return $http.get('/api/v1/event/'+id)
                    .then(function ( response )
                    {
                        return response.data;
                    });
        }
    };
}]);

//View
<div class="event">
    <h2>[[data.event.title]] ID: [[data.event.id]]</h2>
    <div class="event-image">
    </div>
    <div ng-click="loadEvent(data.event.id)">Click voor [[data.event.id]]</div>
</div>


//HTML code for the Laravel View
<div class="col-md-9" ng-controller="EventController">
            <div class="btn btn-success" ng-click="getEvent(15)">Test</div>
            <div class="row">
                <h1 ng-bind="showEvent.event.title"></h1>
                {#<div class="col-md-12">#}
                    {#<h1 class="page-header">Page Heading <small>Secondary Text</small></h1>#}
                    {#<div ng-controller="BannerController">#}
                        {#<ul rn-carousel rn-carousel-auto-slide="3" rn-carousel-transition="slide" rn-carousel-duration="1000" class="image carousel">#}
                            {#<li ng-repeat="banner in banners">#}
                                {#<img ng-src="[[banner.image]]" alt="" class="img-responsive">#}
                            {#</li>#}
                        {#</ul>#}
                    {#</div>#}
                {#</div>#}
                <div class="col-sm-12">
                    <div class="row">
                        <div class="col-sm-4" ng-repeat="event in events">
                            <h1>Een event</h1>
                            <event data="event"></event>
                        </div>
                    </div>
                </div>
                <div class="col-sm-12">
                    <h3>[[eventPaginator.total]]</h3>
                  <div class="pagination">
                        <div ng-repeat="n in [] | range:eventPaginator.total">
                            <button ng-click="loadPage(n+1)">[[n+1]]</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>