I'm trying to create a property editor that accepts a url and gets some open graph tags from it.

I created an API that returns the desired data as json and built a property editor to hit the api and store the data. I've got it all wired up but there is some sort of timeout for updating the view that I can't get over.

The call hits the api and takes ~1s for the response, it updates the model but the backoffice takes ~15-20 seconds to update the view, this seems to be triggered by GetRemainingTimeoutSeconds getting initiated by angular, alternatively I can click inside the generated inputs and it updates the view, but that's clunky for the user.

Has anyone had experience with something similar?

Here's the controller

angular.module("umbraco").controller("Lavidge.NewsArticleLinkController", [ '$scope', 'localizationService',
function ($scope, localizationService) {
    function formatDate(dateString) {
        if (dateString === null) {
            return null;
        }
        var date = new Date(dateString);

        var year = date.getUTCFullYear();
        var month = (date.getUTCMonth() + 1).toString().padStart(2, '0');
        var day = date.getUTCDate().toString().padStart(2, '0');

        return year + '-' + month + '-' + day;
    }
    function copyObjectProps(object) {
        var newObject = {};

        if (object && Object.keys(object).length) {

            for (var p = 0; p < Object.keys(object).length; p++) {
                var key = Object.keys(object)[p];
                var value = object[key];

                newObject[key] = value;
            }

        }
        return newObject;
    }
    var UUID = function () {
        var self = {};
        var lut = [];
        for (var i = 0; i < 256; i++) {
            lut[i] = (i < 16 ? '0' : '') + i.toString(16);
        }
        self.generate = function () {
            var d0 = Math.random() * 4294967295 | 0;
            var d1 = Math.random() * 4294967295 | 0;
            var d2 = Math.random() * 4294967295 | 0;
            var d3 = Math.random() * 4294967295 | 0;
            return lut[d0 & 255] + lut[d0 >> 8 & 255] + lut[d0 >> 16 & 255] + lut[d0 >> 24 & 255] + '-' + lut[d1 & 255] + lut[d1 >> 8 & 255] + '-' + lut[d1 >> 16 & 15 | 64] + lut[d1 >> 24 & 255] + '-' + lut[d2 & 63 | 128] + lut[d2 >> 8 & 255] + '-' + lut[d2 >> 16 & 255] + lut[d2 >> 24 & 255] + lut[d3 & 255] + lut[d3 >> 8 & 255] + lut[d3 >> 16 & 255] + lut[d3 >> 24 & 255];
        };
        return self;
    }();

    var inited = false;

    $scope.editIconTitle = '';
    $scope.moveIconTitle = '';
    $scope.deleteIconTitle = '';
    // localize the edit icon title
    localizationService.localize('general_edit').then(function (value) {
        $scope.editIconTitle = value;
    });
    // localize the delete icon title
    localizationService.localize('general_delete').then(function (value) {
        $scope.deleteIconTitle = value;
    });
    // localize the move icon title
    localizationService.localize('actions_move').then(function (value) {
        $scope.moveIconTitle = value;
    });

    $scope.articles = [];
    $scope.currentUrl = undefined;
    $scope.currentNode = undefined;

    function init() {
        if ($scope.model.value === null || $scope.model.value === undefined || $scope.model.value === "") {
            $scope.model.value = [];
        }
        if ($scope.model.value.length) {
            for (var i = 0; i < $scope.model.value.length; i++) {
                var item = $scope.model.value[i];
                initArticle(item);
            }

            $scope.currentNode = $scope.articles[$scope.articles.length - 1];
        }

        inited = true;
    }

    function initArticle(values) {
        var article = copyObjectProps(values);

        if (!article.key) {
            article.key = UUID.generate();
        }

        $scope.articles.push(article);
        return article;
    }

    function updateModel() {
        if ($scope.realCurrentNode) {
            $scope.$broadcast('ncSyncVal', { key: $scope.realCurrentNode.key });
        }
        if (inited) {
            var newValues = [];
            for (var i = 0; i < $scope.articles.length; i++) {
                var article = $scope.articles[i];
                var newValue = copyObjectProps(article);

                newValues.push(newValue);
            }
            $scope.model.value = newValues;
        }
    }



    $scope.addArticle = function () {
        var article = initArticle(null);
        $scope.currentNode = article;
        article.url = $scope.currentUrl;

        var endpoint = '/umbraco/api/parsemetatags/getalltags?url=' + $scope.currentUrl;

        $.ajax(endpoint)
            .done(function (json) {

                if (json !== null) {
                    article.title = json.Title;
                    article.imageUrl = json.Image;
                    article.description = json.Description;
                    article.publishedDate = formatDate(json.Published);
                }
            })
            .always(function () {
                updateModel();
            });
    };

    $scope.editNode = function (index) {
        if (index >= 0 && index < $scope.articles.length) {
            $scope.currentNode = $scope.articles[index];
        }

        updateModel();
    };

    $scope.removeArticle = function (index) {
        if (index >= 0 && index < $scope.articles.length) {
            $scope.articles.splice(index, 1);
        }

        updateModel();
    };

    $scope.$watch('currentNode', function (newVal) {
        updateModel();
    });
    var unsubscribe = $scope.$on('formSubmitting', function (ev, args) {
        updateModel();
    });
    $scope.$on('$destroy', function () {
        unsubscribe();
    });

    init();
}

]);