ngx-drag-drop из основного списка в дочерний список

Question

Я пытаюсь создать функциональность перетаскивания с использованием библиотеки ngx-drag-drop в angularjs (github здесь https://github.com/reppners/ngx-drag-drop). А вот упрощенная версия моего плункера https://plnkr.co/edit/O4RCm7sPZ5NKP9LPjvU4?p=preview.

То, что я хочу, это когда я перетаскиваю элемент из основного списка и помещаю его в дочерний список A или дочерний список B, я хотел бы добавить новый элемент в правильный дочерний список по правильному индексу, где он был отброшен. Например, если я перетаскиваю букву A из основного списка и помещаю ее в дочерний список A под элементом A2, я хочу, чтобы дочерний список A имел элемент A1, элемент A2, основной список A1, элемент A3. Следующая капля под пунктом А1, список будет Элемент А1, Основной список А2, Элемент А2, Основной список А1, Элемент А3. Мне интересно, как я мог получить и вставить новый элемент в правильный список целей по правильному целевому индексу, который был отброшен.

Вот js код

var 
    app = angular.module('app', ['dndLists'])
    , $s
    ;
app.directive('editInPlace', function() {
  return {
    restrict: 'E',
    scope: {
      value: '='
    },
    template: '<span ng-dblclick="edit()" ng-bind="value"></span><input ng-model="value"></input>',
    link: function($scope, element, attrs) {
      // Let's get a reference to the input element, as we'll want to reference it.
      var inputElement = angular.element(element.children()[1]);

      // This directive should have a set class so we can style it.
      element.addClass('edit-in-place');

      // Initially, we're not editing.
      $scope.editing = false;

      // ng-click handler to activate edit-in-place
      $scope.edit = function() {
        $scope.editing = true;

        // We control display through a class on the directive itself. See the CSS.
        element.addClass('active');

        // And we must focus the element. 
        // `angular.element()` provides a chainable array, like jQuery so to access a native DOM function, 
        // we have to reference the first element in the array.
        inputElement[0].focus();
      };

      // When we leave the input, we're done editing.
      inputElement.prop('onblur', function() {
        $scope.editing = false;
        element.removeClass('active');
      });
    }
  };
});

app.controller('ctrl', function($scope) {
        $s = $scope;
  $scope.models = {
    selected: null,
    lists: {
      "A": [],
      "B": []
    }, 
    masterLists:["A", "B", "C"]
  };

  // Generate initial model
  for (var i = 1; i <= 3; ++i) {
    $scope.models.lists.A.push({
      label: "Item A" + i
    });
    $scope.models.lists.B.push({
      label: "Item B" + i
    });
  }

  $scope.addToList = function(list) {
    var
      i = {
        label: "Item " + (list.length + 1)
      };
    list.push(i);

  }


  $scope.cloneItem  = function(list, index) {
    var
      //o = { label : list[index].label+"-1"};
      o = angular.copy(list[index]);  

    o.label = o.label+"-1";
    list.splice( index + 1, 0, o );
  //  $scope.$apply();
  }
  $scope.removeFromList = function(list, index) {
    list.splice(index, 1);
  }

  $scope.list = $scope.models.lists.A;

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

$s.models.selected = $s.models.lists["A"][1]; 
});