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

  <head>
    <script src="https://code.angularjs.org/1.3.15/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-controller="MainCtrl">
    <my-directive options="dirOptions"></my-directive>
    <br>
    <button ng-click="callDirFunc()">Call directive function</button>
  </body>

</html>
// the application module
angular.module('myApp', [])

// a simple directive defining a linking function
.directive('myDirective', function(){
  
  return {
    template: '<div>A Custom Directive <br> <b ng-show="directiveCtrlCalled">directiveCtrl() was called!!</b> </div>',
    restrict: 'E',
    replace: true,
    scope: { options: '='},
    link: function(scope){
      scope.directiveCtrlCalled = false;
      angular.extend(scope.options, {
        directiveFunction: function(){
          scope.directiveCtrlCalled = true;    
        }
      });
    }
  };
  
})

// the controller passes an options object to the directive.
// Then in the directive's controller that object is extended to provide
// "public" function
.controller('MainCtrl', function($scope){
  
  $scope.dirOptions = {};
  $scope.callDirFunc = function(){
    $scope.dirOptions.directiveFunction();
  };
  
});
/* Styles go here */