The event.id is correctly displayed in the html text, but the function does not receive it properly. Even though it appears correctly in the source code, there seems to be an issue here.
<span ng-repeat="event in [{"id":"dxczhlyvmblc","name":"4 on 4 - Pickup","venuename":"Box Hill Aqualink","numspotsleft":"<strong>Spots now open<\/strong>","day":"28","dayname":"Wednesday"}]">
<button ng-click="toggleModal('<% event.id %>')">More detail = <% event.id %></button>
</span>
https://i.sstatic.net/HYwpy.jpg
shopApp.controller('MainController', function($scope, $http, $q){
$scope.toggleModal = function(eventId){
console.log(eventId+" toggle");
};})
Please note that I am using <% instead of {{ due to the templating engine being used.