<body ng-app="app">
        <div ng-controller="ctrl">
            <my-son fn='clicked(message);'></my-son>
        </div>
    </body>
var app = angular.module('app', []);
            app.controller('ctrl', function ($scope) {
                $scope.clicked = function (value) {
                    alert(value);
                }
            });
            app.directive('mySon', function () {
                return {
                    restrict: 'E',
                    scope: {
                        fn : '&fn'
                    },
                    template: '<div><input type="text" ng-model="value" /> <button class="button" ng-click="fn({message:value})">Click Here</button> </div>'
                };
            });

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular.min.js