How To Save Sorted Picture

[ArdaOtong]

Hi, I am using angular 4 and sortable js to drag pictures,

I have 2 pictures, picture A and B, when I move picture B to the first pic and A as the second pic, when I hit save, the picture won't save as what I moved them, it reset to their original position ,

this is the js part :

    ` Sortable.create(imageId, {

            group: "image-list",
            options: {
                animation: 100
            },
            store: {
                get: function(sortable) {
                  var order = localStorage.getItem(sortable.options.group.name);
                  return order ? order.split("|") : [];
                },
                set: function(sortable) {
                  var order = sortable.toArray();
                  localStorage.setItem(sortable.options.group.name, order.join("|"));
                }
            }
        });`

        and I tried to save it through the $scope.imageBlobUrl, I tried to get only the link of the image but I found no way to get it 

        Thanks

[ArdaOtong]

<div class="row col-md-10" id="imageId" style="display: flex; flex-wrap:wrap;">
            <input type="hidden" id="imageArray" value="" />
            <div class="col-lg-3 col-md-4 col-sm-4 col-xs-6 p-10" style="display: flex;flex-direction:column;text-align:right" ng-repeat="imgsrc in imageBlobUrl"
                 ng-if="!!!imgsrc.toUpperCase().includes('.VID') && !!!imgsrc.toUpperCase().includes('.MOV') && !!!imgsrc.toUpperCase().includes('.MP4') && !!!imgsrc.toUpperCase().includes('.MPEG')">
                <i class="zmdi zmdi-close pull-right" style="top:0;right:0" ng-click="removeImg($index)"></i>
                <img draggable="false" ng-src="{{imgsrc}}" class="img-responsive" style="width: 90%;" />

            </div>
        </div>

the HTML Part