main.html

<div>
  <h2>Moving elements to containers</h2>
  <h5>Drag and drop elements from the left to the right</h5>

  <div class="col-1-3">
    <h4>Container 1</h4>
    <div ng-repeat="item in $ctrl.container1.list">
      <div bf-draggable="item" class="draggable-item">{{item.name}}</div>
    </div>
  </div>

  <div class="col-1-3" bf-drop-container="$ctrl.container2">
    <h4>Container 2</h4>
    <div ng-repeat="item in $ctrl.container2.list">
      <div bf-draggable="item" class="draggable-item">{{item.name}}</div>
    </div>
  </div>

  <div class="col-1-3" bf-drop-container="$ctrl.container3" id="container-3">
    <h4>Container 3</h4>
    <div ng-repeat="ph in $ctrl.placeholders">
      <bf-drop-placeholder bf-drop-container-id="container-3" bf-drop-model="ph" class="placeholder">
        <h4>Drop Here ({{$parent.placeholder.model.pos}})</h4>
      </bf-drop-placeholder>
    </div>
  </div>


</div>