AngularJS Transclusion

HTML

<body ng-app="app">

    <isolated-scope-with-transclusion tasks="tasks">
        <div ng-repeat="task in tasks" tabindex="0" ng-keydown="">
            <strong>{{task.title}}</strong>
        </div>
        {{tasks}}
    </isolated-scope-with-transclusion>
</body>

JavaScript

angular.module("app", [])
    .directive("isolatedScopeWithTransclusion", function () {
        return {
            restrict: "E",
            transclude: true,
            replace: true,
            scope: {
                tasks: "="
            },
            controller: function ($scope) {
            		$scope.some = function() {
                	$scope.name = '' + Math.random();
                }
                $scope.addTask = function () {
                    if (!$scope.tasks) {
                        $scope.tasks = [];
                    }

                    $scope.tasks.push({
                        title: $scope.title
                    });
                };
            },
            template: "<div>Name: <input type='text' ng-model='title'>&nbsp;" +
                        "<button ng-click='addTask()'>Add task</button>" +
                        "<div class='taskContainer' ng-transclude><br>" +
                           
                        "</div>"
        };
    });