Ionic 4 Popover in AngularJS

Question

I am trying to follow the vanilla JS documentation for Ionic 4 so that I can use the latest Ionic framework within an AngularJS app. Currently I am working on a Component Directive header bar that will contain a menu implemented with an Popover.

The problem is that I have no idea how to structure the elements in the template to make the popover work. This is what I have so far, but I've tried a lot of different structures in the template:

Controller:

function TopBar($scope) {
  var vm = this;

  $scope.showMenu = showMenu;

  async function showMenu(e) {
    const popoverController = document.querySelector('ion-popover-controller');
    await popoverController.componentOnReady();

    const popover = await popoverController.create({
      component: 'my-pop-content',
      event: e,
      translucent: false
    });
    return await popover.present();
  }
}

Template:

<ion-header>
  <ion-toolbar>
    <span class="fas fa-bars" style="height:100%;" ng-click="showMenu($event)"></span> <!-- vm.showMenu -->
  </ion-toolbar>
</ion-header>
<ion-content>
  <ion-popover>
    <my-pop-content>
      <div class="po-content">
        Howdy Folks
      </div>
    </my-pop-content>
  </ion-popover>
</ion-content>

<ion-popover-controller>
</ion-popover-controller>

Should I just abandon Ionic4 and revert to an Ionic 1 app? I am using AngularJS, because the app this is based on uses that framework and I was hoping I could just update the Ionic stuff without giving myself too much of a headache.