Filter data in ng-repeat to display only the clicked item with Angularjs

Question

Please help a little bit. I have a list of 7 events displayed already with Angularjs. I'd like when I click on the <h2> (the event name) of some event, to open an ovelay that displays the same data from the database but only for this event which is clicked. I'm sure that 'filter' will do the work but it seems I'm doing something wrong. Here is my code. The ng-app and ng-controller are in the <main> tag. Angularjs version: 1.7.9

My Html:

<main ng-app="eventsApp" ng-controller="eventsCtrl">

    <!-- Overlay that holds and displays a single event -->
    <div>
        <div ng-repeat="x in singlePageEvent | filter:hasName(x.eventName)">
            <div>
                <img ng-src="{{x.eventImgSrc}}" alt="{{x.eventImgName}}"/>
                <h2 class="event-name">{{x.eventName}}</h2>
                <p>{{x.eventTime}}</p>
                <p>{{x.eventPlace}}</p>
            </div>
        </div>
    </div>

    <!-- A list with all the events -->
    <div ng-repeat="x in events">
        <div>
            <img ng-src="{{x.eventImgSrc}}" alt="{{x.eventImgName}}"/>
            <h2 ng-click="singleEventOpen(x)" class="event-name">{{x.eventName}}</h2>
            <p>{{x.eventTime}}</p>
            <p>{{x.eventPlace}}</p>
        </div>
    </div>

</main>

My script:

let eventsApp = angular.module('eventsApp', []);

this filter below is not working at all. It continues to show all the events.

eventsApp.filter('hasName', function() {
    return function(events, evName) {
        var filtered = [];
        angular.forEach(events, function(ev) {
            if (ev.eventName && ev.eventName.indexOf(evName) >-1) {
                filtered.push(ev);
            }
        });
        return filtered;
    }
});

eventsApp.controller('eventsCtrl', function($scope, $http) {
    let x = window.matchMedia("(max-width: 450px)");
    let singleEventOverlay = angular.element(document.querySelector('div.single-event.overlay'));
    let singleEvent = singleEventOverlay;

    function responsiveEventImages(x) { //this displays the list with events
        if (x.matches) {
            $http.get('./includes/events_res.inc.php').then(function(response) {
                $scope.events = response.data.events_data;
            });
        } else {
            $http.get('./includes/events.inc.php').then(function(response) {
                $scope.events = response.data.events_data;
            });
        }
    }

...and then by invoking singleEventOpen() the overlay appears, but it displays all the data, not just the clicked event

    $scope.singleEventOpen = function(singleEvent) {
        let clickedEvent = singleEvent.eventName; //I got the value of each h2 click thanx to @georgeawg but now what?
        console.log("Fetching info for ", singleEvent.eventName);

        $http.get('./includes/single_event.inc.php').then(function(response) {
            $scope.singlePageEvent = response.data.events_data;
        });

        singleEventOverlay.removeClass('single-event-close').addClass('single-event-open');
    }
});

The php file with the database extraction is working fine so I won't display it here. What should I do to make the overlay display only the event which <h2> is clicked?

Here is a pic of the list with events

Here is a pic of the overlay

Thanx in advance.

EDITED I got the value of each h2 click thanx to @georgeawg but now what?

UPDATE Hey, thanx a lot @georgeawg . After many attempts I finally did this:

$scope.singleEventOpen = function(singleEvent) {
    $http.get('./includes/single_event.inc.php').then(function(response) {
        let allEvents = response.data.events_data;
        for (var i = 0; i < allEvents.length; i++) {
            singleEvent = allEvents[i];
        }
    });
    console.log('Fetching data for', singleEvent);
    $scope.ex = singleEvent;
});

And it works well.

Answer 1

Change the ng-click to pass an argument to the singleEventOpen function:

<div ng-repeat="x in events">
    <div>
        <img ng-src="{{x.eventImgSrc}}" alt="{{x.eventImgName}}"/>
        <h2 ng-click="singleEventOpen(x)" class="event-name">{{x.eventName}}</h2>
        <p>{{x.eventTime}}</p>
        <p>{{x.eventPlace}}</p>
    </div>
</div>

Then use that argument:

$scope.singleEventOpen = function(singleEvent) {
    console.log("Fetching info for ", singleEvent.eventName);
    //...
    //Fetch and filter the data

    $scope.ex = "single item data";
}

Adding an argument is the key to knowing which <h2> element was clicked.

---

Update

Don't use ng-repeat in the overlay, just display the single item:

<!-- Overlay that holds and displays a single event -->
̶<̶d̶i̶v̶ ̶n̶g̶-̶r̶e̶p̶e̶a̶t̶=̶"̶x̶ ̶i̶n̶ ̶s̶i̶n̶g̶l̶e̶P̶a̶g̶e̶E̶v̶e̶n̶t̶ ̶|̶ ̶f̶i̶l̶t̶e̶r̶:̶h̶a̶s̶N̶a̶m̶e̶(̶x̶.̶e̶v̶e̶n̶t̶N̶a̶m̶e̶)̶"̶>̶
<div ng-if="ex"">
    <div>
        <img ng-src="{{ex.eventImgSrc}}" alt="{{ex.eventImgName}}"/>
        <h2 class="event-name">{{ex.eventName}}</h2>
        <p>{{ex.eventTime}}</p>
        <p>{{ex.eventPlace}}</p>
    </div>
</div>