Проблема с Multi Transclude в Angular

Я использую multitranscldue в угловых js. У меня есть директива, как показано ниже.

(function(){

    angular.module("MyDirective",['multi-transclude'])
    .directive("myDirective",function(){
        var MyLink = function(scope,element,attr){
            scope.title = attr.title;
        }
        return{
             restrict : 'EA',
            scope: {title:"="},
             transclude:true,
             templateUrl:"directive.html",
             link: MyLink
        }
    });
}())

Html для директивы подобен

<div >
    <div>
        <span data-ng-bind="title"></span>
        <div ng-multi-transclude="card-body"></div>
    </div>
</div>

В моем основном классе html я использую директиву, как показано ниже.

<my-directive title="asdasdas">
        <div name="card-body">
            {{title}}
            </div>
        </my-directive>

Я получаю сообщение об ошибке

Ошибка: незаконное использование ngMultiTransclude. Нет контроллера упаковки.

Пожалуйста, помогите мне с этим.

Ссылка на плункер здесь