On my website, I am using ng-repeat to display various dish postings. I want to trigger a modal to open when I click on a dish, showing the specific data for that dish. To achieve this, I'm assigning each dish a modal div with a unique ID (dish-$index) and toggling its display style from none to block. However, I'm unable to select the element by its ID dish-{{$index}} in my JavaScript code, as it returns null. Why is this happening and what is the best alternative approach? I prefer not to utilize bootstrap for this.
<!-- Trigger/Open The Modal -->
<button class="order">Open Modal</button>
<div id="dish-{{$index}}" class="modal4">
<!-- Modal content -->
<div class="modal-content4">
{{dish.dishName}}
<span class="close4">x</span>
</div>
</div>
</div>
var selector = 'div[ng-id="' + child.key + '"]';
var modal4 = document.getElementById("dish-{{$index}}");
var span4 = document.getElementsByClassName("close4")[0];
$('body').on('click', selector, function () {
google.maps.event.trigger(marker, 'click', {});
modal4.style.display = "block";
});