Basic - with model

{{item.content}}
{{item.content}}
Items1:
          
{{items1 | json}}
Items2:
          
{{items2 | json}}
        
// JS
  controller('BasicModel', ['$scope', '$element', 'dragularService', function TodoCtrl($scope, $element, dragularService) {
    $scope.items1 = [{
      content: 'Move me, but you can only drop me in one of these containers.'
    }, {
      content: 'If you try to drop me somewhere other than these containers, I\'ll just come back.'
    }, {
      content: 'Item 3'
    }, {
      content: 'Item 4'
    }];
    $scope.items2 = [{
      content: 'Item 5'
    }, {
      content: 'Item 6'
    }, {
      content: 'Item 7'
    }, {
      content: 'Item 8'
    }];
    var containers = $element.children().children();
    dragularService([containers[0],containers[1]],{
      containersModel: [$scope.items1, $scope.items2]
    });
  }])
        
        
<!-- HTML -->
<div class='wrapper' ng-controller="Basic">
    <div class='tableRow'>
        <div class='containerVertical'>
            <div ng-repeat="item in items1">{{item.content}}</div>
        </div>
        <div class='containerVertical'>
            <div ng-repeat="item in items2">{{item.content}}</div>
        </div>
    </div>
    <div class="tableRow">
        <div class="container">
            <div>Items1:
                <br/>{{items1 | json}}</div>
        </div>
        <div class="container">
            <div>Items2:
                <br/>{{items2 | json}}</div>
        </div>
    </div>
</div>