Untitled

<!DOCTYPE html>
<html>

  <head>
    <script data-require="angular.js@2.0.0-alpha.45" data-semver="1.4.2" src="https://code.angularjs.org/1.4.2/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body>
    <div data-ng-app="app" data-ng-controller="ParentController as ctrl">
      <h1>Hello Plunker!</h1>
      <my-directive my-callback="ctrl.parentCallback()"></my-directive>
    </div>
  </body>

</html>

// Code goes here

angular
  .module('app', []);
  
angular
  .module('app')
  .directive('myDirective', myDirective)
  .controller('MyDirectiveController', MyDirectiveController)
  .controller('ParentController', ParentController)
  
function myDirective() {
  return {
    bindToController: {
      myCallback: '&'
    },
    restrict: 'E',
    controller: 'MyDirectiveController',
    controllerAs: 'vm',
    scope: {},
    template: '<button data-ng-click="vm.myCallback({msg: \'hello\'})">Call Callback</button>'
  };
}

function MyDirectiveController() {
}

function ParentController() {
  var self = this;
  
  self.parentCallback = parentCallback;

  function parentCallback(args) {
    alert('You called the callback with args: ' + args);
  }
}

/* Styles go here */