title: Drag and Drop using angular JS malfunctioning
body: <p>I am working on a task assignment board and i have a problem on shifting existing tabs (accordion) between certain div's ... The scope variables list is getting updated properly and the code works fine when i am jQuery accordion .But when i use an angular js accordion ,
  The shifting of the accordion tabs gets duplicated .</p>
  
  <pre><code>//   main HTML content
  
   &lt;!DOCTYPE html&gt;
  &lt;html ng-app="App"&gt;
  
  &lt;title&gt;Task WhiteBoard&lt;/title&gt;
  &lt;head&gt;
  &lt;meta charset="utf-8" /&gt;   
  &lt;meta name="description" content="AngularJS + jQuery UI Drag-n-Drop" /&gt;
  
      &lt;link rel="stylesheet/less" type="text/css" href="css/main.less" /&gt;
      &lt;link href="css/zippy.css" rel="stylesheet"&gt;
      &lt;link href="css/jquery-ui-1.9.2.custom.min.css" rel="stylesheet"          
               type="text/css" /&gt;
      &lt;link href="css/bootstrap.min.css" rel="stylesheet"&gt;
  
      &lt;script src="js/jquery-1.8.1.min.js"&gt;&lt;/script&gt;
      &lt;script src="js/jquery-ui.min.js"&gt;&lt;/script&gt;
  
      &lt;script src="js/angular.js"&gt;&lt;/script&gt;
      &lt;script src="js/app.js"&gt;&lt;/script&gt;
      &lt;script src="js/controllers.js"&gt;&lt;/script&gt;
      &lt;script src="js/services.js"&gt;&lt;/script&gt; 
      &lt;script src="js/less-1.1.6.min.js"&gt;&lt;/script&gt; 
  &lt;meta charset="utf-8" /&gt;
  &lt;title&gt;Angular Drag and Drop&lt;/title&gt;
  &lt;/head&gt;
  
  
  &lt;body ng-controller="dndCtrl" ng-cloak&gt;
  &lt;h3&gt;Task Whiteboard&lt;/h3&gt;
  
  
  &lt;div class='list1' droppable value='1' &gt;    
  
  &lt;div class='header'&gt;
      Free Tasks
  &lt;/div&gt;
  
  &lt;div class="below-header"&gt;
  
  &lt;/div&gt;
  
  &lt;div  ng-repeat="item in list1" data-index="{{$index}}" draggable&gt;
      &lt;div class="zippy" zippy-title="{{item.name}}"&gt; 
              {{item.content.newLabel}}   &lt;br/&gt;
              {{item.content.desc}}   &lt;br/&gt;
              {{item.content.effort}} &lt;br/&gt;
              {{item.content.owner}}  &lt;br/&gt;
              {{item.content.issues}} &lt;br/&gt;   
              {{item.content.comments}}   &lt;br/&gt;
              {{item.content.dependency}} &lt;br/&gt;
      &lt;/div&gt;  
  &lt;/div&gt;  
  &lt;/div&gt;  
  
  &lt;div class='list2' droppable value='2'&gt; 
  
  &lt;div class='header'&gt;
      Claimed Tasks
  &lt;/div&gt;
  
  &lt;div class="below-header"&gt;
  
  &lt;/div&gt;
  
  &lt;div ng-repeat="item in list2" data-index="{{$index}}" draggable&gt; 
      &lt;div class="zippy" zippy-title="{{item.name}}"&gt;
              {{item.content.newLabel}}   &lt;br/&gt;
              {{item.content.desc}}   &lt;br/&gt;
              {{item.content.effort}} &lt;br/&gt;
              {{item.content.owner}}  &lt;br/&gt;
              {{item.content.issues}} &lt;br/&gt;   
              {{item.content.comments}}   &lt;br/&gt;
              {{item.content.dependency}} &lt;br/&gt;
      &lt;/div&gt;  
  &lt;/div&gt;  
  &lt;/div&gt;
  
  &lt;div class='list3' droppable value='3'&gt;
  
  &lt;div class='header'&gt;
      Completed Tasks
  &lt;/div&gt;
  
  &lt;div class="below-header"&gt;
  
  &lt;/div&gt;
  
  &lt;div ng-repeat="item in list3" data-index="{{$index}}" draggable&gt;
          &lt;div class="zippy" zippy-title="{{item.name}}"&gt; 
              {{item.content.newLabel}}   &lt;br/&gt;
              {{item.content.desc}}   &lt;br/&gt;
              {{item.content.effort}} &lt;br/&gt;
              {{item.content.owner}}  &lt;br/&gt;
              {{item.content.issues}} &lt;br/&gt;   
              {{item.content.comments}}   &lt;br/&gt;
              {{item.content.dependency}} &lt;br/&gt;
          &lt;/div&gt;  
  &lt;/div&gt;
  &lt;/div&gt;  
  
  
  &lt;div style="clear:both;"&gt;
      list 1 size : {{list1.length}}  &lt;br/&gt;
      list 2 size : {{list2.length}}  &lt;br/&gt;
      list 3 size : {{list3.length}}  &lt;br/&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  
  
  
      //    services.js
  
  
  
  //This makes any element droppable
  //Usage: &lt;div droppable&gt;&lt;/div&gt;
  App.directive('droppable', function ($compile) {
  return {
      restrict: 'A',
      link: function (scope, element, attrs) {
          scope.$watch(function (value) {
              //This makes an element Droppable
              element.droppable({
                  drop: function (event, ui) {
                  var dragIndex =    
     angular.element(ui.draggable).data('index');
  
   if(angular.element(ui.draggable).parent().hasClass('list1') &amp;&amp; 
    element.attr('value')=='2') {
  
   scope.list2.push(scope.list1[dragIndex]);
   scope.list1.splice(dragIndex, 1);
      } 
   else if (angular.element(ui.draggable).parent().hasClass('list2') &amp;&amp;  
     element.attr('value')=='3') {
  
                   scope.list3.push(scope.list2[dragIndex]);                          scope.list2.splice(dragIndex, 1);
                          //  alert("list2 size : "+scope.list2.length);
                      }
                      else if (angular.element(ui.draggable).parent().hasClass('list2') &amp;&amp; element.attr('value')=='1') {
                          scope.list1.push(scope.list2[dragIndex]);                         
                          scope.list2.splice(dragIndex, 1);
                          //  alert("list3 size : "+scope.list3.length);
                      }
                      scope.$apply();
                  }
              });
          });
      }
  };
  });
  
  //zippy directive to give an accordion feel
  
  App.directive('zippy', function(){
  return {
      restrict: 'C',
      // This HTML will replace the zippy directive.
      replace: true,
      transclude: true,
      scope:{ title:'@zippyTitle' },
      template:'&lt;div&gt;'+
      '&lt;div class="title"&gt;{{title}}&lt;/div&gt;'+
      '&lt;div class="body" ng-transclude&gt;&lt;/div&gt;&lt;hr/&gt;'+
      '&lt;/div&gt;',
      // The linking function will add behavior to the template
      link: function(scope, element, attrs) {
          // Title element
          var title = angular.element(element.children()[0]),
          // Opened / closed state
          opened = true;
          // Clicking on title should open/close the zippy
          title.bind('click', toggle);
  
          // Toggle the closed/opened state
          function toggle() {
              opened = !opened;
              element.removeClass(opened ? 'closed' : 'opened');
              element.addClass(opened ? 'opened' : 'closed');
          }
  
          // initialize the zippy
          toggle();
      }
  }
  });
  
  
       //    In controller .js
  
  
      $scope.list1 = [
  { 
      name: 'Intelligent Design', 
      content:    {
          newLabel : 'Create New Label',
          desc : 'Add Description',
          effort : 'Burned effort',
          owner : 'Owner',
          issues : 'Issues',
          comments : 'Comments',
          dependency : 'Dependency'
      }
  },  
  {
      name: 'Good Artist\'s Copy', 
      content:    {
          newLabel : 'Create New Label',
          desc : 'Add Description',
          effort : 'Burned effort',
          owner : 'Owner',
          issues : 'Issues',
          comments : 'Comments',
          dependency : 'Dependency'
      }
  },  
  
  {
      name: 'Task Creation', 
      content:    {
          newLabel : 'Create New Label',
          desc : 'Add Description',
          effort : 'Burned effort',
          owner : 'Owner',
          issues : 'Issues',
          comments : 'Comments',
          dependency : 'Dependency'
      }
  }]
  $scope.list2 = [ 
      {
      name: 'Task4', 
      content:    {
          newLabel : 'Create New Label',
          desc : 'Add Description',
          effort : 'Burned effort',
          owner : 'Owner',
          issues : 'Issues',
          comments : 'Comments',
          dependency : 'Dependency'
      }
  }]
  $scope.list3 = [];
  </code></pre>