I am trying to extend the current media picker property editor to allow for the image cropper overlay to be opened in the content section when the user presses the "edit" link on the media thumbnail, instead of redirecting the user to the media section.

At the moment I am calling this function when the user presses the edit link:

$scope.openOverlay = function (item) {
            //initial image croper overlay
            $scope.imageCropperOverlay = {
                mediaId: '',
                saving: false,
                show: true, //controls whether to show the overlay or not
                value: item.value,
                config: item.config,
                view: '/App_Plugins/Our.Umbraco.OutCrop/cropper.html',
                close: function (oldModel) { //when the overlay is closed, dont show
                    imageCropperOverlay.show = false;
                },
                title: 'Image Crops',
                submitButtonLabel: 'Save Crops',
                submit: function (model) {         //when user clicks save crops button
                    imageCropperOverlay.saving = true;
                    //do savings
                    //get media item again and replace it's umbradoFile value
                    mediaResource.getById(imageCropperOverlay.mediaId).then(function (media) {
                        media.tabs[status.umbracoFile.tabKey].properties[status.umbracoFile.propertyKey].value = imageCropperOverlay.value;
                        mediaResource.save(media, false, []).then(function (media) { //save changes to media item, or craete if new
                            imageCropperOverlay.saving = false;
                            imageCropperOverlay.show = false;
                            notificationsService.remove(0);
                            notificationsService.success("The crops for '" + media.name + "' have been saved");

                        });
                    });
                }
            }
        };

This is the overlay in the HTML:

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

The edit link:

<a class="umb-sortable-thumbnails__action" href="" ng-click="openOverlay(image)">
                    <i class="icon icon-edit"></i>
                </a>

However when i click the edit button nothing happens. I am not sure what the correct way of passing the media item to the overlay is. Right now I am doing: value: item.value.

Why is my overlay not being shown?