AngularJS composite view with the same directive

Question

I have a question, about composite view in AngularJS, that is close to that one : AngularJS Composite Components

However, I would like to know if it is possible to have a directive that includes a list of the same directive, like this :

<mydirective name="thecontainer">
    <mydirective name="a"/>
    <mydirective name="b"/>
    <mydirective name="c"/>
</mydirective>

Thanks,

David.

Edit

Answering blesh, I will be more precise. I'm trying to display boxes (a simple square) that can have one or many boxes, themselves can have many boxes, etc.

Here is the directive

myApp.directive('box', function () {
return {
    restrict:'E',
    replace:true,
    templateUrl:"partials/box.html",
    scope: {
        name : '@'
    },
    link:function (scope, element, attrs, ctrl) {
        console.log("trying to log " + attrs.name);
    }
}
});

Here is the template :

<div class="box">
<div class="box-header">
    <div>{{ name }}</div>
</div>
<div class="box-container">
    <!-- display other boxes here-->
</div>
</div>

Here is the interesting code in the view :

<box name="TOP" >
    <box name="SUB" >

    </box>
    <box name="SUB" >

    </box>
</box>

Obviously something is missing to tell the sub-boxes "hey please display in the right place into your parent and please, parent, adapt your size to the number of children you have"

David.

Answer 1

The answer was really simple, without ng-transclude, angular has no way to interpret correctly the content of the innner HTML tags. So the correct way to do it is to correct the template by adding a ng-transclude like this:

<div class="box">
    <div class="box-header">
        <div>{{ name }}</div>
    </div>
    <div class="box-container" ng-transclude>
        <!-- display other boxes here-->
    </div>
</div>