javascript - My list becomes crazy after sorting -

i'm creating list editor using angular , jquery ui. goal add/edit/remove/sort items.

here's html code display list.

<ul id="sortable" >     <li ng-repeat="cat in admin.catalogues">         <label for="title">title</label>         <input type="text" name="title" ng-model="cat.title" />                             <label for="image">image</label><input type="text" name="image" ng-model="cat.image" istype="image" />         <button ng-click="admin.removecatalogue(cat)">remove</button>     </li> </ul> 

then have these angular methods (i have copied should useful).

this.catalogues = [];  this.addcatalogue = function () {     var newcat = {         title: "",         image: "",         pdf: ""     };     this.catalogues.push(newcat); };  this.removecatalogue = function (item) {     this.catalogues.splice(this.catalogues.indexof(item), 1); };  this.sort = function(fromindex, toindex){     var element = this.catalogues[fromindex];     this.catalogues.splice(fromindex, 1);     this.catalogues.splice(toindex, 0, element);  }; 

and jquery script sortable part - works using jquery ui, , call angular controller update list. have found snippet somewhere on stackoverflow.

$(document).ready(function(){     startindex = -1;     newindex = -1;     $('#sortable').sortable({         placeholder:'placeholder',         start: function (event, ui) {             startindex = ($(ui.item).index());         },         stop: function(event, ui){             newindex = ($(ui.item).index());             angular.element(document.getelementbyid('content')).controller().sort(startindex, newindex);         }     }); }); 

adding items, removing , sorting working fine. after sorting, list becomes crazy. new items added more or less randomly inside list, , remove button removes more 1 item.

i have created fiddle testing: https://jsfiddle.net/neow85/jbg8kdv4/

thanks help!