I'm having trouble reopening my custom image cropper overlay when I delete my currently picked media item and adding another one.

This is how my interface looks: https://i.imgur.com/myypGCd.png

When a person presses the crop button, an overlay with the image cropper functions is shown for the selected image. I can open the overlay just fine if there is already an image selected, but if i choose another one, it won't open.

This is the function that runs when the user presses the button:

$scope.openOverlay = 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/ExtendedMediaPicker/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
                    console.log(model);
                    $scope.overlay.saving = true;
                    //do savings...
                    mediaResource.getById($scope.ids[0])
                        .then(function (media) {
                            console.log(media);
                            //media.name = "I want a new name!";
                            mediaResource.save(media, false, []).then(function (media) { //save changes to media item, or craete if new
                                $scope.overlay.saving = false;
                                $scope.overlay.show = false;
                                notificationsService.remove(0);
                                notificationsService.success("The crops for '" + media.name + "' have been saved");
                                });
                        });
                    $scope.overlay.show = false;
                }
            }
            //console.log($scope.overlay);
        };

Saving functionality doesn't work yet, but right now I just want the overlay to show properly.

This is what loads the overlay in the HTML:

<umb-overlay ng-if="overlay.show"
                 model="overlay"
                 view="overlay.view"
                 title="overlay.title"
                 position="right" class="super-wide">
    </umb-overlay>