How to pass data from an Angular component being used within an AngularJS app?

Question

Use Case: I have an Angular component being used within an AngularJS application. The component is supposed to emit an event on button click that will be captured by the parent page AngularJS application.

Then the parent page (in AngularJS) will trigger reload.

I have been emitting an event from the Angular component, that should ideally be captured in the AngularJS app. I tried achieving this using EventEmitter for emitting the event.

In Angular Component

export class customComponent {
  @Output() customEvent = new EventEmitter<string>();

  emitEvent() {
    this.customEvent.emit('someText');
  }
}

<button (click)="emitEvent()">
Emit Event
</button>

In AngularJS parent page controller

$rootScope.$on('customEvent', (event, data) => {
      console.log(event, data);
    });

<custom-component></custom-component>

I also tried capturing the event using $scope but that did not work out either.

Is there something that is missing here?