In my custom grid editor I have a media picker which selects and image and a content picker which selects a node from the tree.

The desired output is this:

<a href="@Model.value.linkUrl">
    <img src="@url" alt="@Model.value.caption">
</a>

if I choose an image and hit save, the image displays as it should on the web page.

If i select the link button and pick a 'node' from the tree, the image disappears from the back office and the resulting code is

<a href="3020">
    <img alt="@Model.value.caption">
</a>

As you can see, it's set the link url in the

My code is as follows:

editor.controller.js

// Media Picker

angular.module("umbraco").controller("emailMediaPicker.controller",       function ($scope, $rootScope, $timeout, dialogService) {

$scope.setImage = function () {

    dialogService.mediaPicker({
        startNodeId: $scope.control.editor.config && $scope.control.editor.config.startNodeId ? $scope.control.editor.config.startNodeId : undefined,
        multiPicker: false,
        cropSize: $scope.control.editor.config && $scope.control.editor.config.size ? $scope.control.editor.config.size : undefined,
        showDetails: true,
        callback: function (data) {

            $scope.control.value = {
                image: data.image
            };

            $scope.setUrl();
        }
    });
};

$scope.setUrl = function () {

    if ($scope.control.value.image) {
        var url = $scope.control.value.image;

        if ($scope.control.editor.config && $scope.control.editor.config.size) {
            url += "?width=" + $scope.control.editor.config.size.width;
            url += "&height=" + $scope.control.editor.config.size.height;

            if ($scope.control.value.focalPoint) {
                url += "&center=" + $scope.control.value.focalPoint.top + "," + $scope.control.value.focalPoint.left;
                url += "&mode=crop";
            }
        }
        $scope.url = url;
    }
};

 //Set image link

$scope.setImageLink = function () {
    $scope.control.value = { linkUrl: "linkUrl" };
    console.log("Before linkUrl =" + $scope.control.value.linkUrl);
    dialogService.contentPicker({
        startNodeId: $scope.control.editor.config && $scope.control.editor.config.startNodeId ? $scope.control.editor.config.startNodeId : undefined,
        multiPicker: false,
        showDetails: true,
        callback: function (node) {             
            $scope.control.value = {
                id: node.id
            };
            $scope.control.value.linkUrl = node.id;
        }


    });

};

$timeout(function () {
    if ($scope.control.$initializing) {
        //$scope.setImage();
    } else {
        $scope.setUrl();
    }
}, 200);
});

view page .html

<div ng-controller="emailMediaPicker.controller">
<div class="umb-editor-placeholder" ng-click="setImage()" ng-if="control.value === null">
    <i class="icon icon-picture"></i>
    <div ng-id="!control.$inserted" class="help-text"><localize key="grid_clickToInsertImage">Click to insert image</localize></div>
</div>
<div ng-if="control.value">

<!--This is the media picker-->
    <img ng-if="url" ng-click="setImage()" ng-src="{{url}}" ng-model="control.value.image" class="fullSizeImage" />

    <!--This is the link picker-->
    <button ng-click="setImageLink()" ng-model="control.value.linkUrl">{{control.value.linkUrl}} - Selected</button>

</div>
<umb-overlay ng-if="mediaPickerOverlay.show"
             model="mediaPickerOverlay"
             view="mediaPickerOverlay.view"
             position="right">
</umb-overlay>

</div>

Thanks for your help. :)