aframe physics collision event not detected in angular controller - angularjs

Question

I am trying to detect a collision event between a dynamic body and a static body and using Don Mccurdy's physics system.
The "collide" event is getting successfully invoked on collision but the subsequent function fails with the error "cannot read property 'body' of undefined for e"
My HTML source
<div ng-app="webVrApp">
<div ng-controller="trying">
<a-scene physics="debug: true">
<a-entity id='ball' position="0 1 -4" material="color:green;"
geometry="primitive:sphere; radius: 0.5;" dynamic-body></a-entity>
<a-plane color='red' static-body rotation="-90 0 0" width="100"
height="100"></a-plane>
<a-entity camera look-controls position="0 1.5 0">
<a-cursor></a-cursor>
<a-entity position="0 0 -3" id="weapon" static-body>
<a-box color='blue' width='0.25' height='0.5' depth='3' static-
body></a-box>
</a-entity>
</a-entity>
</a-scene>
</div>
</div>
and the controller code
app.controller('trying', ['$scope', function($scope){
var $ = function (sel){document.querySelector(sel)};
document.querySelector('#weapon').addEventListener('collide', function(e) {
const ball = $("#ball");
if(e.detail.body.id === ball.body.id) { //error comes for this line unknown 'body'
alert("collision happened");
};
});
}]);
Here is a codepen for this - codepen
Please help.

Answer 1

I'm using aframe-aabb-collider-component to detect colision between two objects, try it. https://www.npmjs.com/package/aframe-aabb-collider-component