Component with callback

<!DOCTYPE html>
<html ng-app="myApp">

  <head>
    <script data-require="angular.js@1.5.6" data-semver="1.5.6" src="https://code.angularjs.org/1.5.6/angular.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
    <script src="myComponent.js"></script>
    <script src="myPageController.js"></script>
  </head>

  <body>
    <h1>Hello Plunker!</h1>
    <form>
    
    <div ng-include="'myPage.inc'"></div> 
    </form>
  </body>

</html>

// Code goes here

/* Styles go here */

var myApp = angular.module('myApp', []);console.log("xx");

myApp.directive('myComponent', function() {
  return {
    restrict: 'E',
    'scope': {
      'yourFunction': '&'
    },
    bindToController: {
      onChange: '&',
      label: '@'
    },
    templateUrl: 'myComponent.inc',
    controller: 'myComponentController',
    controllerAs: 'vm'
  };
});

myApp.controller('myComponentController', [
      function() {
        var vm = this;

        vm.handleCheckboxClick = function() {
          console.log("change")
          vm.onChange();
        };
      }
    ]);

<label>{{vm.label}}</label>

<input type="checkbox" ng-click="vm.handleCheckboxClick()" ng-model="confirmed" ng-change="yourFunction()"/><br>

<section id="main-content" ng-controller="myPageController as ctrl">

<h2>This is the page.</h2>
    <my-component label="Scope" your-function="cb()"></my-component>
    <my-component label="Ctrl"  your-function="ctrl.cb()"></my-component>

</section>

var page = angular.module('myApp');

page.controller('myPageController', [
  '$scope',
  function($scope) {
    var ctrl = this;
    
    // This doesn't seem to be visible
    $scope.cb = function() {
         console.log("cb called")
    };
    
    // This doesn't seem to be visible
    ctrl.cb = function() {
         console.log("ctrl cb");
    }
    
    // This seems to work
    page.cb = function() {
        console.log("page cb");
    }
    
    
  }]);