AngularJS - Transclude

HTML

<div ng-app="myapp">
    <div ng-controller="myController">
        <my-directive-wrapper model="mymodel">
            <my-directive-inner ng-repeat="item in mymodel.items" />
        </my-directive-wrapper>
    </div>
</div>

CSS

a.back, a.next {
    border:1px solid #000;
    padding:2px;
}

div.list{
    display:inline-block;
    margin:5px;
}

span.item {
    border:0px solid transparent;
    border-radius: 10px;
    background-color:#000;
    color:#fff;
    padding:4px;
    margin:2px;
}

JavaScript

angular.module("myapp", [])
.controller("myController", function($scope){
    $scope.mymodel = { 
        name : "Transclude test",
        items : [
            { title : "test1" },
            { title : "test2" },
            { title : "test3" }
        ]
    };    
})

.directive("myDirectiveWrapper", function(){
    return {
        scope: {
            model: '='        
        },
        restrict: 'E',
        transclude: true,
        link: function(scope, element, attrs, controller) {

        },
        template: "<div><h3>{{ model.name }}</h6><a class='back'>Back</a><div ng-transclude class='list'></div><a class='next'>Next</a>"
    }
})

.directive("myDirectiveInner", function(){
    return {
        restrict: 'E',
        link: function(scope, element, attrs, controller) {
           
        },
        template: "<span class='item'>{{ item.title }}</span>"
   }
})
;