I have upgraded an Umbraco v7 project to v8. The project uses custom grid Editors that allow you to select an image and save, after the upgrade I have not been able to get the grid Editors to save. I can select and image and the image is displayed in the back office when I click save and publish the image disappears and is not saved

I have updated the controller to use editorService as dialogService is not used anymore.

This is my controller

angular.module("umbraco").controller("responsiveimagecontroller", function ($scope, assetsService, editorService) {

$scope.openMediaPicker = function () {

    console.error("openMediaPicker");
    var options = {
        multiPicker: false,
        submit: function (value) {
            populateImage(value.selection[0]);
            editorService.close();
        },
        close: function () {
            editorService.close();
        }
    }

    editorService.mediaPicker(options);
}

function populateImage(item) {

    $scope.control.responsiveImage.imageUrl = item.image;
    $scope.control.responsiveImage.imageId = item.id;
}

if (!$scope.control.responsiveImage) {

    $scope.control.responsiveImage = {};
}

assetsService.loadCss("~/App_Plugins/ResponsiveImage/editor.css");
});

.html file

<div class="content-panel" ng-controller="responsiveimagecontroller">
<div class="control-group">
    <label class="control-label">Image <span>*</span></label>
    <div class="controls">
        <input type="hidden" name="imageId" ng-model="control.responsiveImage.imageId" required />


        <div ng-if="control.responsiveImage.imageUrl">

            <img ng-src="{{control.responsiveImage.imageUrl}}" style="background-color: #ccc;">
            <br /><br />
        </div>

        <a href ng-click="openMediaPicker()" prevent-default class="btn btn-default">
            Choose image
        </a>

    </div>
    </div>

and Manifest

{ "gridEditors": [
{
  "name": "Responsive Image",
  "alias": "ResponsiveImage",
  "icon": "icon-autofill",
  "view": "/app_plugins/responsiveimage/editor.html",
  "render": "/app_plugins/responsiveimage/render.cshtml",
  "config": {
    "image": {
      "show": true
    },
    "altText": {
      "show": true
    }
  }
} ],"javascript": [
"/app_plugins/responsiveimage/editor.controller.js" ]}

This is what is being saved in the db table umbracoPropertyData

website{"name":"1 column layout","sections":[{"grid":"12","rows":[{"name":"1 Column","id":"16f5a6ae-8131-329e-85fb-10d88571d5d5","areas":
[{"grid":"12","controls":[{"value":"<p>Some text</p>",
"editor":{"alias":"rte","view":"rte"},"styles":null,"config":null},{"value":null,
"editor{"alias":"ResponsiveImage","view":"/app_plugins/responsiveimage/editor.html"},"styles":null,"config":null}],"styles":null,"config":null}],"styles":null,"config":null}]}]}

any help would be appreciated

Thanks