在没有代码的Angular中的列表之间拖动？

Question

这个世界怎么可能？我刚刚找到一个主题，其中有一个“敏捷列表”模块，用户可以在列表之间拖动面板。我没有看到在拖动项目时更新列表的任何代码，但父列表对象已成功更新。

该模块位于Ercellaneous＆gt;下的Inspinia主题中。敏捷委员会：
http://wrapbootstrap.com/preview/WB0R5L90S

ui-view中加载的视图是：

<div class="row wrapper border-bottom white-bg page-heading">
    <div class="col-lg-10">
        <h2>Agile board</h2>
        <ol class="breadcrumb">
            <li>
                <a href="index.html">Home</a>

            </li>
            <li>
                <a>Miscellaneous</a>
            </li>
            <li class="active">
                <strong>Agile board</strong>
            </li>
        </ol>
    </div>
    <div class="col-lg-2">

    </div>
</div>
<div class="wrapper wrapper-content  animated fadeInRight" ng-controller="agileBoard">

    <div class="row">
        <div class="col-lg-4">
            <div class="ibox">
                <div class="ibox-content">
                    <h3>To-do</h3>
                    <p class="small"><i class="fa fa-hand-o-up"></i> Drag task between list</p>

                    <div class="input-group">
                        <input type="text" placeholder="Add new task. " class="input input-sm form-control">
                                <span class="input-group-btn">
                                        <button type="button" class="btn btn-sm btn-white"> <i class="fa fa-plus"></i> Add task</button>
                                </span>
                    </div>
                    <ul ui-sortable="sortableOptions" class="sortable-list connectList agile-list" ng-model="todoList">
                        <li class="{{task.statusClass}}-element" ng-repeat="task in todoList">
                            {{task.content}}
                            <div class="agile-detail">
                                <a href="#" class="pull-right btn btn-xs btn-white">{{task.tagName}}</a>
                                <i class="fa fa-clock-o"></i> {{task.date}}
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="col-lg-4">
            <div class="ibox">
                <div class="ibox-content">
                    <h3>In Progress</h3>
                    <p class="small"><i class="fa fa-hand-o-up"></i> Drag task between list</p>
                    <ul ui-sortable="sortableOptions" class="sortable-list connectList agile-list" ng-model="inProgressList">
                        <li class="{{task.statusClass}}-element" ng-repeat="task in inProgressList">
                            {{task.content}}
                            <div class="agile-detail">
                                <a href="#" class="pull-right btn btn-xs btn-white">{{task.tagName}}</a>
                                <i class="fa fa-clock-o"></i> {{task.date}}
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="col-lg-4">
            <div class="ibox">
                <div class="ibox-content">
                    <h3>Completed</h3>
                    <p class="small"><i class="fa fa-hand-o-up"></i> Drag task between list</p>
                    <ul ui-sortable="sortableOptions" class="sortable-list connectList agile-list" ng-model="completedList">
                        <li class="{{task.statusClass}}-element" ng-repeat="task in completedList">
                            {{task.content}}
                            <div class="agile-detail">
                                <a href="#" class="pull-right btn btn-xs btn-white">{{task.tagName}}</a>
                                <i class="fa fa-clock-o"></i> {{task.date}}
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>

    </div>

    <div class="row">
        <div class="col-lg-12">

            <h4>
                Serialised Output
            </h4>

            <div class="output p-m m white-bg">

                <h3>TodDo tasks</h3>
                {{todoList }}

                <h3>In progress tasks</h3>
                {{inProgressList }}

                <h3>Completed tasks</h3>
                {{completedList }}

            </div>


        </div>
    </div>


</div>

控制器：

function agileBoard($scope) {


    $scope.todoList = [
        {
            content: 'Simply dummy text of the printing and typesetting industry.',
            date: '12.10.2015',
            statusClass: 'warning',
            tagName: 'Mark'
        },
        {
            content: 'Many desktop publishing packages and web page editors now use Lorem Ipsum as their default.',
            date: '05.04.2015',
            statusClass: 'success',
            tagName: 'Tag'
        }
    ];
    $scope.inProgressList = [
        {
            content: 'Quisque venenatis ante in porta suscipit.',
            date: '12.10.2015',
            statusClass: 'success',
            tagName: 'Mark'
        },
        {
            content: ' Phasellus sit amet tortor sed enim mollis accumsan in consequat orci.',
            date: '05.04.2015',
            statusClass: 'success',
            tagName: 'Tag'
        }
    ];
    $scope.completedList = [
        {
            content: 'Simply dummy text of the printing and typesetting industry.',
            date: '12.10.2015',
            statusClass: 'warning',
            tagName: 'Mark'
        },
        {
            content: 'Many desktop publishing packages and web page editors now use Lorem Ipsum as their default.',
            date: '05.04.2015',
            statusClass: 'success',
            tagName: 'Mark'
        }
    ];

    $scope.sortableOptions = {
        connectWith: ".connectList"
    };

}