How to add angular directive to full calendar event

Question

I'm using Angular-UI Calendar (angular version of Arshaw's fullcalendar) and on EventRender I would like to add a Angular-UI-bootstrap popover to the event element.

I have tried these (using coffeescript):

    eventRender: (event, element) ->
        element.find(".fc-event-inner").wrap("<div popover='I appeared on mouse enter!' popover-title='The title.' popover-trigger='mouseenter'></div>")

and

    eventRender: (event, element) ->
        element.find(".fc-event-inner").wrap($compile("<div popover='I appeared on mouse enter!' popover-title='The title.' popover-trigger='mouseenter'></div>")($scope))
        $scope.$apply()

But neither of those seem to be doing anything. I guess the problem with first one at least is that the event is rendered after angular has done it's magic already. But the second one didn't help either. With some static element the popover is working correctly.

Answer 1

Got it working :)

eventRender: (event, element) ->
    element.attr('popover', "Finally it's working")
    element.attr('popover-title', 'Hello world')
    element.attr('popover-trigger', 'mouseenter')
    $compile(element)($scope)