How to Override onPreview

[J88G]

I want to override the button preview, So i'm trying override the method onPreview.

app.directive("markdowntextarea", ['$http', function ($http) {
    return {
        link: function (el_scope, element, attr) {
            element.markdown(
                {
                    autofocus: false,
                    savable: false,
                    onPreview: function (e) {
                        console.log('im here!!');
                        var previewContent = "preview";
                        if (e.isDirty()) {
                            var originalContent = e.getContent();
                            $http({
                                url: '/api/markdown/',
                                data: {"body": originalContent},
                                method: 'POST'
                            }).then(function successCallback(response) {
                                console.log(response.data.content);
                                previewContent = response.data.content; // set previewContent inside the callback
                            });
                        } else {
                            previewContent = "";
                        }
                        return previewContent;
                    },
                });
        }
    }
}]);

I'm not sure if I have some error or what, but always after I add some text and click preview button, i got the text "preview". Could you please let me know if is my mistake or if is something wrong here? Thanks

[toopay]

@J88G Your HTTP call was done asynchronously, thats why. I think you could use promise concept in Angular.