angularjs - Multiple directives [myPopup, myDraggable] asking for new/isolated scope -

i wrote directive dialogs (mypopup) , 1 dragging dialog (mydraggable), allways error:

multiple directives [mypopup, mydraggable] asking new/isolated scope

here plunker: http://plnkr.co/edit/kmq0hk5rnvw5xobddq5p?p=preview

what can do?

js code:

var app = angular.module('myapp', []);  function mycontroller($scope) {     $scope.isdraggable = true; }   app.directive('mypopup', [     function () {         "use strict";          return {             restrict: 'e',             replace: true,             transclude: true,             template: '<div my-draggable="draggable"class="dialog"><div class="title">{{title}}</div><div class="content" ng-transclude></div></div>',             scope: {                 title: '@?dialogtitle',                 draggable: '@?isdraggable',                 width: '@?width',                 height: '@?height',             },             controller: function ($scope) {                 // code             },             link: function (scope, element, attr) {                 if (scope.width) {                     element.css('width', scope.width);                 }                  if (scope.height) {                     element.css('height', scope.height);                 }                                 }         };     } ]);  app.directive('mydraggable', ['$document',     function ($document) {     return {         restrict: 'a',         replace: false,         scope: { enabled: '=mydraggable' },          link: function (scope, elm, attrs) {             var startx, starty, initialmousex, initialmousey;              if (scope.enabled === true) {                 elm.bind('mousedown', function ($event) {                     startx = elm.prop('offsetleft');                     starty = elm.prop('offsettop');                     initialmousex = $event.clientx;                     initialmousey = $event.clienty;                     $document.bind('mousemove', mousemove);                     $document.bind('mouseup', mouseup);                     $event.preventdefault();                 });             }              function getmaxpos() {                 var computetstyle = getcomputedstyle(elm[0], null);                 var tx, ty;                 var transformorigin =                     computetstyle.transformorigin ||                     computetstyle.webkittransformorigin ||                     computetstyle.moztransformorigin ||                     computetstyle.mstransformorigin ||                     computetstyle.otransformorigin;                 tx = math.ceil(parsefloat(transformorigin));                 ty = math.ceil(parsefloat(transformorigin.split(" ")[1]));                 return {                     max: {                         x: tx + window.innerwidth - elm.prop('offsetwidth'),                         y: ty + window.innerheight - elm.prop('offsetheight')                     },                     min: {                         x: tx,                         y: ty                     }                 };             }              function mousemove($event) {                 var x = startx + $event.clientx - initialmousex;                 var y = starty + $event.clienty - initialmousey;                 var limit = getmaxpos();                 x = (x < limit.max.x) ? ((x > limit.min.x) ? x : limit.min.x) : limit.max.x;                 y = (y < limit.max.y) ? ((y > limit.min.y) ? y : limit.min.y) : limit.max.y;                 elm.css({                     top: y + 'px',                     left: x + 'px'                 });                 $event.preventdefault();             }              function mouseup() {                 $document.unbind('mousemove', mousemove);                 $document.unbind('mouseup', mouseup);             }         }     }; }]); 

from docs:

example scenarios of multiple incompatible directives applied same element include:

multiple directives requesting isolated scope.

multiple directives publishing controller under same name.

multiple directives declared transclusion option.

multiple directives attempting define template or templateurl.

try removing isolate scope on mydraggable's directive:

app.directive('mydraggable', ['$document',     function ($document) {     return {         restrict: 'a',         replace: false,         scope: { enabled: '=mydraggable' }, //remove line 

replace scope.enabled attrs.enabled:

if (attrs.enabled == "true") { 

and modify template bind enable attribute:

<div my-draggable="draggable" enabled="{{draggable}}" 

demo