UI sortable doesn't work as expected if I include some html between ui-sortable and ng-repeat directive

[pankajkumar]

<div class="widget-holder"  ui-sortable="sortableOptions" ng-model="columnWidgets">
       <div class="clearfix btn-row">
        <button type="button" class="btn btn-default"">Save as canvas</button>
    </div>
    <div ng-repeat="appliedwidget in columnWidgets" >
        <widget header="{{header}}"></widget>
    </div>
</div>

It doesn't work(when I am trying to drop it to different element position, model gets updated with undefined object). But if I remove btn-row div (given as follows) then it works:-

<div class="widget-holder"  ui-sortable="sortableOptions" ng-model="columnWidgets">
    <div ng-repeat="appliedwidget in columnWidgets" >
        <widget header="{{header}}"></widget>
    </div>
</div>

[thgreasi]

Duplicate of #41, #177, #98.

README clearly states:

ui-sortable element should only contain one ng-repeat and not any other elements (above or below).
Otherwise the index matching of the generated DOM elements and the ng-model's items will break.
In other words: The items of ng-model must match the indexes of the generated DOM elements.

And also suggests:

ui-sortable lists containing many 'types' of items can be implemented by using dynamic template loading with ng-include or a loader directive, to determine how each model item should be rendered.

So rephrasing README, I would suggest you to follow one of these directions:
either place the controls right below & outside the widget-holder
or use a directive for all list items and let it decide the proper way to present them (actual items or item with controls)
PS1: One more duplicate of #41...
PS2: It actually works as intended.

[pankajkumar]

Sorry for your trouble, I have missed that. Will cross check with documentation next time.

Thanks a lot for the quick reply.