title: Multiple directives [myPopup, myDraggable] asking for new/isolated scope
body: <p>I wrote a directive for dialogs (myPopup) and another one for dragging this dialog (myDraggable), but I allways get the error: </p>
  
  <blockquote>
    <p>Multiple directives [myPopup, myDraggable] asking for new/isolated scope</p>
  </blockquote>
  
  <p>Here is a Plunker: <a href="http://plnkr.co/edit/kMQ0hK5RnVw5xOBdDq5P?p=preview">http://plnkr.co/edit/kMQ0hK5RnVw5xOBdDq5P?p=preview</a></p>
  
  <p>What can I do?</p>
  
  <p>JS code:</p>
  
  <pre><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: '&lt;div my-draggable="draggable"class="dialog"&gt;&lt;div class="title"&gt;{{title}}&lt;/div&gt;&lt;div class="content" ng-transclude&gt;&lt;/div&gt;&lt;/div&gt;',
              scope: {
                  title: '@?dialogTitle',
                  draggable: '@?isDraggable',
                  width: '@?width',
                  height: '@?height',
              },
              controller: function ($scope) {
                  // Some 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 &lt; limit.max.x) ? ((x &gt; limit.min.x) ? x : limit.min.x) : limit.max.x;
                  y = (y &lt; limit.max.y) ? ((y &gt; 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);
              }
          }
      };
  }]);
  </code></pre>