Multiple Image picker with Sorting

Mvc\Scripts\ImagePicker\designerview-simple.js

angular.module('designer').requires.push('sfImageSelector', 'sfSelectors', 'ngSanitize');

angular.module('designer').controller('SimpleCtrl', [
    '$scope',
    function ($scope) {

        // This (or some representation of it) is what you'd save back to the Properties (Controller)
        $scope.selectedImages = [];

        $scope.picker = {
            images: []
        };

        $scope.cancel = function () {
            $scope.picker.images.length = 0;
            $scope.$uibModalInstance.dismiss();
        };

        $scope.done = function () {
            if ($scope.picker.images.length) {
                var img = $scope.picker.images[0];
                $scope.selectedImages.push({
                    Id: img.Id,
                    ProviderName: img.ProviderName,
                    Extension: img.Extension,
                    Title: img.Title,
                    Size: getSize(img),
                    DateCreated: getMsDate(img.DateCreated),
                    ThumbnailUrl: img.ThumbnailUrl,
                    SfImage: img // optional, if you need it, but probably don't want to serialize it to Properties
                });
            }
            $scope.cancel();
        };

        $scope.pickImage = function () {
            $scope.$openModalDialog();
        };

        $scope.removeImage = function (item, index) {
            $scope.selectedImages.splice(index, 1);
        };

        $scope.sortItems = function (e) {
            var item = $scope.selectedImages[e.oldIndex];
            $scope.selectedImages.splice(e.oldIndex, 1);
            $scope.selectedImages.splice(e.newIndex, 0, item);
        };

        $scope.sortableOptions = {
            hint: function (element) {
                return $('<div class="sf-backend-wrp"><div class="list-group-item list-group-item-multiselect list-group-item-draggable list-group-item-hint list-group-item-hint-2">' +
                    element.html() +
                    '</div></div>');
            },
            placeholder: function (element) {
                return $('<div class="list-group-item list-group-item-placeholder list-group-item-placeholder-2"></div>');
            },
            handler: ".handler",
            axis: "y"
        };

        function getSize(image) {
            return Math.ceil(image.TotalSize / 1024) + " KB";
        }
        function getMsDate(dateStr) {
            return (new Date(parseInt(dateStr.substring(dateStr.indexOf('Date(') + 'Date('.length, dateStr.indexOf(')')))));
        };
    }
]);

Mvc\Views\ImagePicker\DesignerView.Simple.cshtml

@using Telerik.Sitefinity.Frontend.Mvc.StringResources
@using Telerik.Sitefinity.Localization

<style>
    .sf-backend-wrp .list-group-item-drag.list-group-item-drag-full {
        height: auto;
        left: 0;
        bottom: 10px;
    }
    .sf-backend-wrp .list-group-item.list-group-item-hint {
        opacity: .4;
    }
</style>

<p class="clearfix"><button type="button" class="btn pull-right" ng-click="pickImage()">Add Image</button></p>
<div class="list-group list-group-endless" kendo-sortable k-options="sortableOptions" k-on-change="sortItems(kendoEvent)">
    <div ng-repeat="image in selectedImages" class="list-group-item">
        <span ng-show="selectedImages.length > 1" class="handler list-group-item-drag list-group-item-drag-full"></span>
        <div class="row">
            <div class="col-xs-3">
                <img ng-src="{{ image.ThumbnailUrl }}" alt="{{ image.Id }} - {{ image. Title }}" class="img-responsive" />
            </div>
            <div class="col-xs-8">
                {{ image.Title }}
                <div><b>Type:</b> {{ image.Extension }}</div>
                <div><b>File size:</b> {{ image.Size }}</div>
                <div><b>Uploaded:</b> {{ image.DateCreated | date : 'M/d/yyyy h:mm' }}</div>
            </div>
            <div class="col-xs-1">
                <button type="button" title="Remove Image" ng-click="removeImage(image, $index)" class="btn btn-default btn-xs pull-right"><span class="glyphicon glyphicon-remove"></span></button>
            </div>
        </div>
    </div>
</div>
<div ng-if="!selectedImages.length">No images selected</div>
<div
     template-url="image-selector-temaplate"
     modal
     size="normal"
     window-class="modal-fluid sf-backend-wrp"
     existing-scope="true"
     ></div>
<script type="text/ng-template" id="image-selector-temaplate">
    <div class="modal-header">
        <button type="button" class="close" ng-click="cancel()">
            <i class="fa fa-times"></i>
        </button>
        <h3 class="modal-title">@(Res.Get<ClientComponentsResources>().SelectImage)</h3>
    </div>
    <div class="modal-body">
        <sf-image-selector sf-model="picker.images"></sf-image-selector>
    </div>
    <div class="modal-footer">
        <button type="button" class="btn btn-primary pull-left" ng-click="done()" ng-disabled="!picker.images.length">@(Res.Get<ClientComponentsResources>().DoneSelecting)</button>
        <button type="button" class="btn btn-link  pull-left" ng-click="cancel()">@(Res.Get<ClientComponentsResources>().Cancel)</button>
    </div>
</script>

Mvc\Views\ImagePicker\DesignerView.Simple.json

{
  "priority": 1,
  "components": [ "sf-image-selector" ]
}