Consuming jquery with angularjs ng-click from php datasource

Note i am using the blade templating engine, so dont be confused, when i use <% angular %> and {!! blade/laravel !!} syntax.

the data source from php/laravel is:

$newData[] = ['id' => $event['id'], 'name' => $event['name'], 'venuename' =>  $event['venue']['name'], 'numspotsleft' => $numSpotsLeft, 'eventdateusa' => $eventDate['date_usa']];

return htmlspecialchars(json_encode($newData));

How do i turn this: (note the <% event.id %> in ng-click is NOT correctly rendering)

<span ng-init="events = {!! $agendaEventData !!}"></span>
<span ng-repeat="event in events ">
<button ng-click="toggleModal('<% event.id %>')">More detail = <% event.id %></button></span>

into the following js var so it can be consumed by jquery:

var agendaEventData = {
        '10-17-2015' : [
                {content : '<span class=\"fc-event-action\"><button ng-click="toggleModal('event_id')" class="btn btn-default">working modal</button></span>'},
        ]
    };

I am guessing a directive but do not know where to start. This question is an evolution of this overview question dynamic ng-click to be used in jquery rendered html

current output

via Chebli Mohamed