Directive - with model

       
        
// JS
  controller('DirectiveModel', ['$scope', function TodoCtrl($scope) {
    $scope.items1 = [{
      content: 'Move me, and make copy on drop.'
    }, {
      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'
    }];
    $scope.dragularOptions = {
      containersModel: $scope.items1,
      classes: {
        mirror: 'custom-green-mirror'
      },
      nameSpace: 'common' // just connecting left and right container
    };
  }])
        
        
<!-- HTML -->
 <div class='wrapper' ng-controller="DirectiveModel">
  <div class='containerVertical' dragular="dragularOptions">
    <div ng-repeat="item in items1">{{item.content}}</div>
  </div>
  <div class='containerVertical' dragular='{"containersModel":"items2","classes":{"mirror":"custom-green-mirror"},"nameSpace":"common"}'>
    <div ng-repeat="item in items2">{{item.content}}</div>
  </div>
</div>