How to use function from component inside page controller in AngularJS?

Question

I want to use a function from a component inside my page.controller First, I do not know if this is possible? and secondly, if possible, how can I do this?

Here I have a function inside component.controller called checkStatus, I want to execute it, so mine ng-disabledrotates false, and I can click the button SAVE.

testComponent.component.js:

export default {
  template: temp,
  controller: myComponentController,
  controllerAs: 'vm',
  bindings: {
    popupMsg : '&'
  }
};

function myComponentController() {
  'ngInject';

  this.popupMsg = function() {
    alert("It is working!");
    this.checkStatus();
  };

  this.checkStatus = function() {
    this.mustPass = true;
  };

}

myPage.controller.js:

export class MyPageController {

  constructor() {
    'ngInject'
    ...
  }

  save() {
    ...
  }
}

mypage.html:

<form>
<test-component mandatory="vm.popupMsg()"> </test-component>

<div>
  <button type="submit" ng-click="vm.save()" ng-disabled="!vm.mustPass"> Save </button>
</div>
</form>

Plunker for testing

Answer 1

testComponent.

testComponent.component.js

bindings: {
  statusChange: '&'

}

function myComponentController() {

     this.checkStatus = function() {
        this.mustPass = true;
        this.statusChange({$event: this.mustPass});
    };

mypage.html

<test-component mandatory="vm.popupMsg()" status-change="vm.onStatusChange($event)"> </test-component>