javascript - Sort or Rearrange Rows of a table in angularjs (drag and drop) -

i wanted have functionality of rearranging rows in table (sorting rows using drag , drop). and index of row arrangement should change in model.

how can similar : http://jsfiddle.net/tzybu/1162/ using angular directive?

i generating table :

<table id="sort" class="table table-striped table-bordered">   <thead>     <tr>       <th class="header-color-green"></th>       <th ng-repeat="titles in rules.titles">{{titles.title}}</th>     </tr>   </thead>   <tbody ng-repeat="rule in rules.data">     <tr>       <td class="center"><span>{{rule.ruleseq}}</span></td>       <td ng-repeat="data in rule.ruledata">{{statusarr[data.value]}}</td>     </tr>   </tbody> </table> 

i did it, here fiddle : sortable rows of table

html

<div ng:controller="controller">     <table style="width:auto;" class="table table-bordered">         <thead>             <tr>                 <th>index</th>                 <th>count</th>             </tr>         </thead>         <tbody ui:sortable ng:model="list">             <tr ng:repeat="item in list" class="item" style="cursor: move;">                 <td>{{$index}}</td>                 <td>{{item}}</td>             </tr>         </tbody>{{list}}         <hr> </div> 

directive (js)

var myapp = angular.module('myapp', ['ui']);  myapp.controller('controller', function ($scope) {     $scope.list = ["one", "two", "thre", "four", "five", "six"]; });  angular.bootstrap(document, ['myapp']);