Перетащите с помощью Angular 1

Question

Новое в Angular, ссылка, откуда я пытаюсь создать. Нет ошибки в консоли и не отображается результат. У меня немного другое требование, но это должно быть основой, но я не могу его выполнить. Что я хочу перетащить функциональность между 2 таблицами, а также он не должен быть сортируемым. Если элемент перетаскивается из какой-либо таблицы, его следует поместить в другую таблицу, и сортировка запрещена. И множественный выбор также должен быть возможен как в ссылке ниже. Не знаю, что я делаю не так

https://marceljuenemann.github.io/angular-drag-and-drop-lists/demo/

Html

var app = angular.module('demo',['dndLists']);
app.controller("MultiDemoController", function($scope) {
 $scope.list = [
  {
    "listName": "A",
    "items": [
      {
        "label": "Item A1"
      },
      {
        "label": "Item A2"
      },
      {
        "label": "Item A3"
      },
      {
        "label": "Item A4"
      }
    ],
    "dragging": false
  },
  {
    "listName": "B",
    "items": [
      {
        "label": "Item B1"
      },
      {
        "label": "Item B2"
      },
      {
        "label": "Item B3"
      },
      {
        "label": "Item B4"
      }
    ],
    "dragging": false
  }
];
    $scope.models = [
      {listName: "A", items: [], dragging: false},
      {listName: "B", items: [], dragging: false}
    ];
   
    /**
     * dnd-dragging determines what data gets serialized and send to the receiver
     * of the drop. While we usually just send a single object, we send the array
     * of all selected items here.
     */
    $scope.getSelectedItemsIncluding = function(list, item) {
      item.selected = true;
      return list.items.filter(function(item) { return item.selected; });
    };

    /**
     * We set the list into dragging state, meaning the items that are being
     * dragged are hidden. We also use the HTML5 API directly to set a custom
     * image, since otherwise only the one item that the user actually dragged
     * would be shown as drag image.
     */
    $scope.onDragstart = function(list, event) {
       list.dragging = true;
       if (event.dataTransfer.setDragImage) {
         var img = new Image();
         img.src = 'framework/vendor/ic_content_copy_black_24dp_2x.png';
         event.dataTransfer.setDragImage(img, 0, 0);
       }
    };

    /**
     * In the dnd-drop callback, we now have to handle the data array that we
     * sent above. We handle the insertion into the list ourselves. By returning
     * true, the dnd-list directive won't do the insertion itself.
     */
    $scope.onDrop = function(list, items, index) {
      angular.forEach(items, function(item) { item.selected = false; });
      list.items = list.items.slice(0, index)
                  .concat(items)
                  .concat(list.items.slice(index));
      return true;
    }

    /**
     * Last but not least, we have to remove the previously dragged items in the
     * dnd-moved callback.
     */
    $scope.onMoved = function(list) {
      list.items = list.items.filter(function(item) { return !item.selected; });
    };

    // Generate the initial model
    angular.forEach($scope.models, function(list) {
      for (var i = 1; i <= 4; ++i) {
          list.items.push({label: "Item " + list.listName + i});
      }
    });

    // Model to JSON for demo purpose
    $scope.$watch('models', function(model) {
        $scope.modelAsJson = angular.toJson(model, true);
    }, true);

});

/**
 * The dnd-list should always have a min-height,
 * otherwise you can't drop into it once it's empty
 */
.multiDemo ul[dnd-list] {
    min-height: 42px;
    padding-left: 0px;
}

/**
 * An element with .dndPlaceholder class will be
 * added to the dnd-list while the user is dragging
 * over it.
 */
.multiDemo ul[dnd-list] .dndPlaceholder {
    background-color: #ddd;
    display: block;
    min-height: 42px;
}

.multiDemo ul[dnd-list] li {
    background-color: #fff;
    border: 1px solid #ddd;
    border-top-right-radius: 4px;
    border-top-left-radius: 4px;
    display: block;
    margin-bottom: -1px;
    padding: 10px 15px;
}

/**
 * Show selected elements in green
 */
.multiDemo ul[dnd-list] li.selected {
    background-color: #dff0d8;
    color: #3c763d;
}

<!DOCTYPE html>
<html lang="en">
<head>
<title>Drag &amp; Drop Lists for angular.js</title>

    <!-- jQuery is not required -->
    <!-- <script src="//code.jquery.com/jquery-1.11.0.min.js"></script> -->

    <!-- angular is the only dependency! -->
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-drag-and-drop-lists/2.1.0/angular-drag-and-drop-lists.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    </head>
<body ng-app="demo">
<div ng-controller = 'MultiDemoController'>
<!-- your widget template -->
 <ul dnd-list='' dnd-drop="onDrop(list, item, index)">
    <li ng-repeat="item in list.items"
        dnd-draggable="getSelectedItemsIncluding(list, item)"
        dnd-dragstart="onDragstart(list, event)"
        dnd-moved="onMoved(list)"
        dnd-dragend="list.dragging = false"
        dnd-selected="item.selected = !item.selected"
        ng-class="{'selected': item.selected}"
        ng-hide="item.selected">
        {{item.label}}
    </li>
</ul>
 </div>
 </body>
 </html>

Answer 1

Я нашел, почему это не работает.

Из-за плохой документации они упустили одну важную вещь

Посмотрите http://joxi.ru/5mdYR6jikPO892 (скриншот)

Так что проблема была в том, что вы пропустили нг-повтор в своем HTML

 ...
 <div ng-repeat="listItem in list" class="col-md-6 ng-scope">
     <ul dnd-list="list">
       <li ng-repeat="item in listItem.items"
           ...

Пример JSFiddle