Custom button for each event in ui-calendar fullcalendar

When you click on each button, it just calls a modal so you can edit or delete an event. I am having trouble passing in the event from the view.

This is in the controller:

$scope.eventRender = function (event, element, view) {
    element.append(calendarEventService.formatWeekEvent(event));
    $compile(element)($scope);
};

$scope.uiConfig = {
  calendar:{
    ...,
    eventRender: $scope.eventRender
  }
};

This is the service the eventRender is calling:

app.service('calendarEventService', function () {

    this.formatWeekEvent = function (event) {
        return <a whole bunch of html to render the button> +
        '<a ng-click="editActivityModal(event, $event)">Edit</a>' +
        '<a ng-click="deleteActivityModal(event, $event)">Delete</a>'
    };

});

The event itself gets passed into the service, but when the editActivityModal or deleteActivityModal gets called, the event is not being passed and I only get undefined, however, the $event is being passed (this is just to use the preventDefault and stopPropagation stuff)

Found a solution to this as follows:

In the returning html add a css class to bind a click event in the eventRender function:

app.service('calendarEventService', function () {

    this.formatWeekEvent = function (event) {
        return <a whole bunch of html to render the button> +
        '<a class="editEvent">Edit</a>' +
        '<a class="deleteEvent">Delete</a>';
    };

});

In the eventRender function:

$scope.eventRender = function (event, element, view) {
    element.append(calendarEventService.formatWeekEvent(event));
    element.find(".editEvent").bind('click', function () {
        $scope.editEvent(event);
        return false;
    });
    element.find(".deleteEvent").bind('click', function () {
        $scope.deleteEvent(event);
        return false;
    });
    $compile(element)($scope);
};