I have an image cropper overlay that is being displayed for a media item selected from a media picker. I am able to display the media item and make changes to its crops just fine, but I am not sure how I go about saving my changes.

This is the overlay in question, without the saving functionality:

$scope.remove = function (index) {

            $scope.overlay = {
                mediaId: $scope.images.udi,
                saving: false,
                show: true, //controls whether to show the overlay or not
                value: $scope.images[0].metaData.umbracoFile.Value,
                config: $scope.images[0].metaData.umbracoFile.Value,
                view: '/App_Plugins/Our.Umbraco.OutCrop/cropper.html',
                close: function (oldModel) { //when the overlay is closed, dont show
                    $scope.overlay.show = false;
                },
                title: 'Image Crops',
                submitButtonLabel: 'Save Crops',
                submit: function (model) {         //when user clicks save crops button
                    $scope.overlay.saving = true;
                    $scope.overlay.show = false;
                    //do savings...
                }
            }

When i press the submit button I need to have the new crops saved to the media item. The values the overlay uses to display the current crops are located in the "metaData.umbracoFile.Value" of the image. Only a single image is able to be selected.