AngularJS ui-sortable - unable to move items

I'm working on an AngularJS project with a feature that users can move items across arrays. Only one array is shown on initialization; when users drag an item and mouseover on the desired array name, that particular array will be shown instead and users can drop the item there.

Below is a codepen project to illustrate the feature: http://codepen.io/anon/pen/PPWpQV

I have gotten it kinda working, however there are two scenarios which I'm experiencing problems:

1. When there are three arrays, I'm able to move items across them (even to the empty array). However the last item in an array cannot be moved. Also, the placeholder sometimes only appear after a considerable amount of time.

2. When there are two arrays only and one is empty, I'm unable to move any items at all. (Try commenting out one of the non-empty array.)

If all arrays are shown on initialization instead of show on mouseover (i.e. removing the ng-show attribute), the sortable feature work seamlessly.

I've spent some time trying to figure it out but didn't managed to get my head around. Any advice are much appreciated!

JS

var myApp = angular.module("app", ['ui.sortable']);

myApp.controller("MainController", function ($scope, $timeout) {

    $scope.item_lists = [
        ['1', '2', '3', '4', '5'],
        ['A', 'B', 'C', 'D', 'E'], // Comment out this line to test scenario 2
        []
    ]

    $scope.sortable = {
        appendTo: '.container-fluid',
        helper: 'clone',
        connectWith: '.items',
        dropOnEmpty: true,
        cursor: 'move',
        placeholder: 'placeholder'
    }; 

    $scope.setVisibleArray = function (value) {
        $scope.visible_array_id = value;
    };

    $scope.visible_array_id = 0;

});

HTML

<div ng-app="app" class="container-fluid" ng-controller="MainController">
  <div class="folder">
    <div ng-repeat="item_list in item_lists" ng-mouseover="setVisibleArray($index)" ng-class="{'highlighted': visible_array_id == $index}">Array {{$index}}</div>
  </div>
  <div class="items" ng-repeat="item_list in item_lists" ui-sortable="sortable" ng-model="item_list" ng-show="visible_array_id == $index"> <!-- Sortable works seamlessly if ng-show attribute is removed. -->
    <div ng-repeat="item in item_list">Item {{item}}</div>
  </div>
</div>