AngularJS - Transclude

HTML

<div ng-app="myapp">
    <div ng-controller="myController">
        <my-directive-wrapper my-model="test">
            <my-directive-inner ng-repeat="item in items" />
        </my-directive-wrapper>
        
        
        <my-directive-wrapper my-model="abc">
            <my-directive-inner ng-repeat="item in changeName" />
        </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.test = {
        name : "Transclude test",
        items : [
            { title : "test1" },
            { title : "test2" },
            { title : "test3" }
    ]};
    
    $scope.abc = {
        name : "A different Name",
        changeName : [
            { title : "abc1" },
            { title : "abc2" }
    ]};
})

.directive('myDirectiveWrapper', ['$compile', function ($compile) {
   return {
        transclude: true,
        restrict: 'E',
        compile: function (element, attrs, transclude) {
            var contents = element.contents().remove();
            var compiledContents;
            return function(scope, iElement, iAttr) {
               // create a "new" scope
               var childScope = scope.$new();
               
               // extend using the model binding provided
               angular.extend(childScope, scope[iAttr.myModel]);
                
                // compile the contents
                if (!compiledContents) {
                    compiledContents = $compile(contents, transclude);
                }
                
                // process the contents
                compiledContents(childScope, function(clone, childScope) {
                         iElement.append(clone); 
                });
            };
        },
        template: "<div><h3>{{ 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>"
   }
})
;