Different options - with model

Items1:
          
{{items1 | json}}

Items2:
          
{{items2 | json}}

        
// JS
  .controller('DifferentOptionsModel', ['$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 containerLeft = document.querySelector('#containerLeft'),
      containerRight = document.querySelector('#containerRight');

    function accepts(el, target, source) {
      if (source === containerLeft || source === target) {
        return true;
      }
    }

    dragularService([containerLeft], {
      containersModel: [$scope.items1],
      copy: true,
      //move only from left to right  
      accepts: accepts
    });

    dragularService([containerRight], {
      containersModel: [$scope.items2],
      removeOnSpill: true,
      //move only from left to right  
      accepts: accepts
    });

  }])
        
        
<!-- HTML -->
<div class='wrapper' ng-controller="DifferentOptionsModel">
    <div class='tableRow'>
      <div id="containerLeft" class='containerVertical'>
        <div ng-repeat="item in items1">{{item.content}}</div>
      </div>
      <div id="containerRight" class='containerVertical'>
        <div ng-repeat="item in items2">{{item.content}}</div>
      </div>
    </div>
    <div class="tableRow">
      <div class='containerVertical'>
        <pre>Items1:
          <br/>{{items1 | json}}</pre>
      </div>
      <div class='containerVertical'>
        <pre>Items2:
          <br/>{{items2 | json}}</pre>
      </div>
    </div>
  </div>