Multiple directives [directive#1, directive#2] asking for isolated scope on

I'm attempting to build a new directive on top of an already existing directive but I am halted in my proces. When loading the page I'm facing the following error: Multiple directives [directive#1, directive#2] asking for isolated scope on `<easymodal title="Test-Title" text="Text-Text" oncancel="show = false" onok="alert();">` The base directive looks like this: ``` Rohan.directive('easymodal', function () { return { restrict: 'E', // priority: 200, transclude: true, replace: true, scope:{ showModal: "=show", callback: "=closeFunction", dismissable: '&' }, template: '<div data-ng-show="showModal" class="modal-container">' + '<div class="modal-body">' + '<div class="title"><span data-translate></span><a data-ng-show="dismissable" data-ng-click="dismiss()">x</a></div>' + '<div data-ng-transclude></div>' + '</div>' + '<div class="modal-backdrop" data-ng-click="dismiss()"></div>' + '</div>' }; }); ``` And my wrapper directive looks like this: ``` Rohan.directive('easydialog', function () { return { restrict: 'E', transclude: true, scope: {title: '@', text: '@', onOk: '&', onCancel: '&'}, replace: true, template: '<easymodal>' + '{{text}} ' + '<hr>' + '<button ng-click="{{onCancel}}" value="Cancel"' + '<button ng-click="{{onOk}}" value="Ok"' + '</easymodal>' }; }); ``` My html looks like this: ``` <easydialog title="Test-Title" text="Text-Text" onCancel="show = false" onOk="alert();" /> ``` At first I though my title attribute was conflicting so I removed that attribute in the html line and from my wrapper directive but it was not effective.