Connected Nested Lists in Angular with UI Sortable

I would like to implement the following:

Connected Nested Lists in Jquery UI Sortable

using Angular and the Angular Jquery UI Sortable. I need parents and children containers that are both sortable. Parents that you can rearrange the order (within the set of parents) and children that you can rearrange and also drag to a different parent.

Is it possible with the Jquery UI Sortable Angular directive or do I have to create a new directive for having nested lists?

Here is a jsFiddle that was created to solve the previous question: http://jsfiddle.net/HG8k6/4/

$("ul.containers").sortable({
    placeholder: "ui-state-highlight-container",
    revert: true,
    forcePlaceholderSize: true,
    axis: 'y',
    start: function (e, ui) {
        //alert("started");
    },
    update: function (e, ui) {
        //alert("updated");
        //save();
    }
});

function SetSortableRows(rows)
{
    rows.sortable({
    placeholder: "ui-state-highlight-row",
    connectWith: "ul.rows:not(.containers)",
    containment: "ul.containers",
    helper: "clone",
    revert: true,
    forcePlaceholderSize: true,
    axis: 'y',
    start: function (e, ui) {
        //alert("started");
    },
    update: function (e, ui) {
        //alert("updated");
        //save();
    }
});

}