<html>
<head>
    <title>Shared service</title>

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.js"></script>
 
    <script>
    
    var app = angular.module('app', []);

    app.controller('ctrl', ['$scope', function ($scope) {
        $scope.numbers = [];

        $scope.add = function(number) {
            $scope.numbers.push("$scope.add " + number)
        };

    }]);    

    app.directive('adderbasic', function() {
        return {
            scope: { fun: "&" },
            template: 
                "<h3>basic</h3>" +
                "<button ng-click='fun({param: 123})'>call passed function</button>"
        }
    })    

    app.directive('adderadvanced', function() {
        return {
            scope: { fun: "&" },
            template: 
                "<h3>advanced</h3>" +
                "<input type='text' ng-model='somenumber'><br>" +
                "<button ng-click='fun({param: somenumber})'>call passed function</button>"
        }
    })

</script>

</head>
<body ng-app="app">
    <div ng-controller="ctrl">
        {{ numbers }}

        <br>

        <div adderbasic fun="add(param)"></div>

        <div adderadvanced fun="add(param)"></div>

    </div>    
</body>
</html>