title: How to use ng-sortable in nested directives
body: <p>I want to use ng-sortable in a nested directives. I always get the error: <strong>Error: Multiple directives [collection, ngSortable] asking for isolated scope. Is this even possible ?</strong> </p>
  
  <pre><code>  &lt;!doctype html&gt;
  &lt;html ng-app='APP'&gt;
      &lt;head&gt;
  &lt;meta name="description" content="Angular Nested recursive directives" /&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.min.js"&gt;&lt;/script&gt;
      &lt;!-- AngularJS --&gt;
  
    &lt;!-- Sortable.js --&gt;
  
   &lt;!-- AngularJS --&gt;
    &lt;script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"&gt;&lt;/script&gt;
  
    &lt;!-- Sortable.js --&gt;
    &lt;script src="http://rubaxa.github.io/Sortable/Sortable.js"&gt;&lt;/script&gt;
  
    &lt;!-- ng-sortable.js --&gt;
    &lt;script src="http://rubaxa.github.io/Sortable/ng-sortable.js"&gt;&lt;/script&gt;
  
    &lt;/head&gt;
      &lt;body&gt;
          &lt;div&gt;
              &lt;collection collection="tasks"&gt;
          &lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  
  
  
  angular.module('APP', ['ng-sortable'])
   
  .directive('collection', function () {
      return {
          restrict: "E",
          replace: true,
          scope: {
              collection: '='
          },
          template: "&amp;lt;ul&gt;&amp;lt;member ng-repeat="member in collection" member="member"&gt;&amp;lt;/ul&gt;"
      }
  })
   
  .directive('member', function ($compile) {
      return {
          restrict: "E",
          replace: true,
          scope: {
              member: '='
          },
          template: "&amp;lt;li&gt;{{member.name}}&amp;lt;/li&gt;",
          link: function (scope, element, attrs) {
              var collectionSt = '&amp;lt;collection collection="member.children"&gt;';
              if (angular.isArray(scope.member.children)) {       
  
                  $compile(collectionSt)(scope, function(cloned, scope)   {
                      element.append(cloned); 
                    });
              }
          }
      }
  })
  
  .controller('IndexCtrl', function ($scope) {
      $scope.tasks = [
          {
              name: 'Europe',
              children: [
                  {
                      name: 'Italy',
                      children: [
                          {
                              name: 'Rome'
                          },
                          {
                              name: 'Milan'
                          }
                      ]
                  }, 
                  {
                      name: 'Spain'
                  }
              ]
          }, 
          {
              name: 'South America',
              children: [
                  {
                      name: 'Brasil'
                  },
                  {
                      name: 'Peru'
                  }
              ]
          }
      ];
  });
  </code></pre>
  
  <p><a href="http://jsbin.com/xogovazuce/edit?html,js,console,output" rel="nofollow noreferrer">Jsbin demo</a></p>
  
  <p>Regard and thanks!</p>