dnd-Draggable inside custom directive template

[B-Esmaili]

i am trying to implement a drag & drop grid editor by means of this plugin.in that I have declared a directive and inside the compile function of directive i add dnd-Draggable attribute to grid rows , columns ,.... but things not going as expected. following is what i have tried.

.directive('container', function () {
        return {
            restrict: "E",
            replace: true,
            scope: {
                childreen: '='
            },
            template: "<member ng-repeat='child in childreen' child='child'></member>",
        }
    })
.directive('member', function ($compile) {
        return {
            restrict: "E",
            replace: true,
            scope: {
                child: '='
            },
            template: "<div></div>",
            compile: function (tElem, tAttrs) {
                tElem.attr("dnd-draggable", "child");
                tElem.attr("dnd-effect-allowed", "move");
                tElem.attr("dnd-moved", "childreen.splice($index, 1)");

                return function (scope, element, attrs) {
                    switch (scope.child.class) {
                        case "grid-row":
                            element.addClass("grid-row");
                            break;
                        case "grid-column":
                            element.addClass("grid-column");
                            break;
                        case "widget":
                            element.text(scope.child.name);
                            break;
                        default:
                            break;
                    }

                    if (angular.isArray(scope.child.childreen)) {
                        element.append("<container childreen='child.childreen'></container>");
                    }
                    $compile(element.contents())(scope);
                }
            }
        }
    })

and following is the model i am passing into container :

{
            "childreen": [
                {
                    "name": 'row1',
                    "class": "grid-row",
                    "childreen": [
                        {
                            "name": 'col1',
                            "class": "grid-column",
                            "childreen": [
                                {
                                    "class": "widget",
                                    "name": 'W1'
                                },
                                {
                                    "class": "widget",
                                    "name": 'W2'
                                }
                            ]
                        },
                        {
                            "name": 'col2',
                            "class": "grid-column",
                            "childreen": [
                                {
                                    "class": "widget",
                                    "name": 'W3'
                                },
                                {
                                    "class": "widget",
                                    "name": 'W4'
                                }
                            ]
                        },
                        {
                            "name": 'col2',
                            "class": "grid-column",
                            "childreen": [
                                {
                                    "class": "widget",
                                    "name": 'W5'
                                },
                                {
                                    "class": "widget",
                                    "name": 'W6'
                                }
                            ]
                        }
                    ]
                }
            ]
        }

and this is the markup :

<div ng-app="gridBuilder"
     class="nestedDemo"
     ng-controller="gridController">
    <div dnd-list="model.childreen">
        <container childreen='model.childreen'></container>
    </div>
</div>