A Pen by Francesco Occhipinti.

index.html

<div ng-app="sortableApp" ng-controller="sortableController" class="container">
  <h2>ui.sortable ng1.0 connected lists</h2>

  <div class="floatleft">
    <div ui-sortable="sortableOptions" class="apps-container screen floatleft" ng-model="screen" ng-repeat="screen in rawScreens">
      <div class="app" ng-repeat="app in screen">{{$index}} {{app.title}}</div>
    </div>
    <div style="clear: both;"></div>
</div>

  <div class="floatright">
    <div ng-repeat="t in transformed">
      {{t.title}} left
      <input type="checkbox" ng-model="t.position" ng-true-value="left" ng-change="switch(t)">
    </div>
  </div>
  
  <div class="clear"></div>

  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
  <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
  <script src="https://rawgithub.com/angular-ui/ui-sortable/master/src/sortable.js"></script>
</div>

script.js

var myapp = angular.module('sortableApp', ['ui.sortable']);


myapp.controller('sortableController', function ($scope) {
  var tmpList = [];
  
  $scope.rawScreens = [
    [{
      icon: './img/icons/facebook.jpg',
      title: 'Facebook (a)',
      link: 'http://www.facebook.com'
    }, {
      icon: './img/icons/youtube.jpg',
      title: 'Youtube (a)',
      link: 'http://www.youtube.com'
    }, {
      icon: './img/icons/gmail.jpg',
      title: 'Gmail (a)',
      link: 'http://www.gmail.com'
    }, {
      icon: './img/icons/google+.jpg',
      title: 'Google+ (a)',
      link: 'http://plus.google.com'
    }, {
      icon: './img/icons/twitter.jpg',
      title: 'Twitter (a)',
      link: 'http://www.twitter.com'
    }, {
      icon: './img/icons/yahoomail.jpg',
      title: 'Yahoo Mail (a)',
      link: 'http://mail.yahoo.com'
    }, {
      icon: './img/icons/pinterest.jpg',
      title: 'Pinterest (a)',
      link: 'http://www.pinterest.com'
    }],
    [{
      icon: './img/icons/facebook.jpg',
      title: 'Facebook (b)',
      link: 'http://www.facebook.com'
    }, {
      icon: './img/icons/youtube.jpg',
      title: 'Youtube (b)',
      link: 'http://www.youtube.com'
    }, {
      icon: './img/icons/gmail.jpg',
      title: 'Gmail (b)',
      link: 'http://www.gmail.com'
    }, {
      icon: './img/icons/google+.jpg',
      title: 'Google+ (b)',
      link: 'http://plus.google.com'
    }, {
      icon: './img/icons/twitter.jpg',
      title: 'Twitter (b)',
      link: 'http://www.twitter.com'
    }, {
      icon: './img/icons/yahoomail.jpg',
      title: 'Yahoo Mail (b)',
      link: 'http://mail.yahoo.com'
    }, {
      icon: './img/icons/pinterest.jpg',
      title: 'Pinterest (b)',
      link: 'http://www.pinterest.com'
    }]
  ];
  
  $scope.$watch(function() {
    var left = $scope.rawScreens[0].map(function(e) {
      e.position = 'left';
      return e;
     }),
        right = $scope.rawScreens[1].map(function(e) {
      e.position = 'right';
      return e;
     });
    $scope.transformed = left.concat(right);
  });
  
  $scope.switch = function(t) {
    if(t.position == 'left') {
      var remove = 1,
          add = 0;
    } else {
      var remove = 0,
          add = 1;
    }
    $scope.rawScreens[remove] = $scope.rawScreens[remove].filter(function(e) {
      return e.title != t.title;
    });
    $scope.rawScreens[add].push(t);
  };
  
  $scope.sortingLog = [];
  
  $scope.sortableOptions = {
    placeholder: "app",
    connectWith: ".apps-container"
  };
  
  $scope.logModels = function () {
    $scope.sortingLog = [];
    for (var i = 0; i < $scope.rawScreens.length; i++) {
      var logEntry = $scope.rawScreens[i].map(function (x) {
        return x.title;
      }).join(', ');
      logEntry = 'container ' + (i+1) + ': ' + logEntry;
      $scope.sortingLog.push(logEntry);
    }
  };
});

style.css

.list {
	list-style: none outside none;
	margin: 10px 0 30px;
}

.apps-container {
  border: 2px dashed blue;
  margin: 10px 10px 0 0;
  padding: 5px;
}

.app {
	width: 170px;
	padding: 5px 10px;
	margin: 5px 0;
	border: 2px solid #444;
	border-radius: 5px;
	background-color: #EA8A8A;

	font-size: 1.1em;
	font-weight: bold;
	text-align: center;
	cursor: move;
}


/***  Extra ***/

body {
	font-family: Verdana, 'Trebuchet ms', Tahoma;
}

.logList {
	margin-top: 20px;
	width: 250px;
	min-height: 300px;
	padding: 5px 15px;
	border: 5px solid #000;
	border-radius: 15px;
}

.logItem {
  margin-bottom: 10px;
}

.logList:before {
	content: 'log';
	padding: 0 5px;
	position: relative;
	top: -1.1em;
	background-color: #FFF;
}

.container {
	width: 750px;
	margin: auto;
}

h2 {
	text-align: center;
}

.floatleft {
  float: left;
}

.floatright {
  float: right;
}

.clear {
  clear: both;
}

ui.sortable-ng1.0-connected-lists.markdown

ui.sortable ng1.0 connected lists

A Pen by Francesco Occhipinti on CodePen.

License.