javascript - Angular architecture for a sorting directive -

being quite new angular, searching best way achieve quite simple task.

my aim update in database, through angular $resource service, order (i have position attribute) of project model.

i have following template structure :

<table class="table table-hover">     <thead>         <tr>             <th>#</th>             <th>title</th>             <th>date</th>             <th>link</th>             <th></th>             <th></th>         </tr>     </thead>     <tbody id="sortable" my-drag-list>         <tr ng-repeat="project in projects" ng-class="{warning: !project.publish}">             <td></td>             <td>{{project.title}}</td>             <td>{{project.date|date: 'mmmm yyyy'}}</td>             <td><a ng-href="{{project.link}}" target="blank">{{project.link}}</a></td>             <td><a ng-href="#/projects/{{project.id}}/"><span class="glyphicon glyphicon-edit"></span></a></td>             <td><a ng-click="deleteproject(project)"><span class="glyphicon glyphicon-trash"></span></a></td>         </tr>     </tbody> </table> <button type="button" class="btn btn-success" ng-show="data.savesort" my-update-sort-button>save new sort</button> 

tr in tbody element movable. when click on button element (which out of scope created ng-repeat directive), want update database whith new position values, determined dom position of each tr (upper tr have smaller position value).

at first glance, intends my-update-sort-button directive following :

var link = function(scope, el){      el.on('click', function(){         var els = el.parent().find('tr');          for(var = 0, len = els.length; i<len; i++){             projects.update({id: els.eq(i).data('projectid')}, {position: i});         }     }); }; 

but not sure "quality" of such solution. not fact of adding data-project-id attribute on tr element.

thanks ideas or solutions case !

you need keep info "project" position in it's model. when "project" moved save info model. in "my-drag-list".

when click update button send info model without scanning dom:

var link = function(scope, el){    el.on('click', function(){       var model;       for(var = 0, len = scope.model.projects.length; i<len; i++){           model = scope.model.projects[i];           projects.update({id: model .id}, {position: model.position});       }   }); }; 

even better don't send lot of requests server. send 1 request info together.