How to update selected itmes of jQueryUI Selectable with AngularJS?

I would like to use the jQueryUI Selectable widget together with AngularJS. I managed to include it using the ui-jq jQuery Passthrough directive from AngularUI which is working well to get the desired UI effect. Now I want to update the data of the selected items using AngularJS but couldn't figure out a way to do it.

I found the AngularUI Sortable directive, which may be a good starting point to implement a Selectable directive, but as I just started with AngularJS I have trouble adapting it to my needs.

Example:

http://jsfiddle.net/ffeldha/2KzRt/

How can I update the name of the selected items?

You can create a directive for selectable without needing angular-ui and add items with an addItem() method in scope

HTML:

<ol ui-selectable>

JS

var myApp = angular.module('soil', [])

myApp.directive('uiSelectable', function () {
    return function (scope, el, attrs) {
        el.selectable();
    };
});

function ItemCtrl($scope) {
    /* triggered by "ng-submit" on a form*/
    $scope.addItem = function () {
        /* newItem comes from "ng-model" on an input*/
        if (!$scope.newItem.length) {
            return;
        }
        $scope.items.push({
            name: $scope.newItem
        });

        $scope.newItem = '';
    };
    $scope.newItem = '';
    $scope.items = [{
        name: 'one'
    }, {
        name: 'two'
    }, {
        name: 'three'
    }];
}

DEMO:http://jsfiddle.net/2KzRt/5/

Update Here's how to create a a dynamic set of models to update the list items when selected:

HTML:

    <div id="update_items" ng-show="updateItems.length">
        <div ng-repeat="item in updateItems"> 
           <input value="{{item.name}}" ng-model="items[item.index].name"/>
        </div>
        <button ng-click="updateItems=[]">Cancel</button>
    </div>

JS:

var myApp = angular.module('soil', [])

myApp.directive('uiSelectable', function () {
    return function (scope, el, attrs) {
        el.selectable({
            stop:function(evt,ui){

                var selected=el.find('.ui-selected').map(function(){
                    var idx=$(this).index();
                    return {name: scope.items[idx].name, index:idx}
                }).get();

                scope.updateItems=selected;
                scope.$apply()
            }
        });
    };
});


function ItemCtrl($scope) {

    $scope.addItem = function () {
        if (!$scope.newItem.length) {
            return;
        }
        $scope.items.push({
            name: $scope.newItem
        });

        $scope.newItem = '';
    };
    $scope.newItem = '';
    $scope.updateItems=[];
    $scope.items = [{
        name: 'one'
    }, {
        name: 'two'
    }, {
        name: 'three'
    }];
}

DEMO: http://jsfiddle.net/2KzRt/7/