Directive: bindToController

HTML

<script src="https://code.angularjs.org/1.3.7/angular.js"></script>
<div ng-controller="MyController">

  <my-directive><button ng-click=vm.showPopover()>hello</button></my-directive>
</div>

JavaScript

var myApp = angular.module('myApp', []);

myApp.controller('MyController', function($scope) {
 
});

myApp.directive('myDirective', function() {
  return {
    restrict: 'E',
    template: '<button ng-click=vm.showPopover()>hello</button>',
    controller: controller,
    controllerAs: 'vm',
    transclude: true,
    bindToController: true
  };

  function controller($element, $document) {
    var vm = this;
    vm.showPopover = showPopover;

    function showPopover() {
      alert('show popover');
    };
  }
});