Setup method in tinymceOptions breaks model binding - TinyMCE AngularJS

Question

In app.js, I placed my "setup" to create a custom button as below:

$scope.tinymceOptions = {
        height:250,
        plugins: [
            "advlist autolink lists link charmap print preview anchor",
            "searchreplace visualblocks code fullscreen",
            "insertdatetime media table contextmenu paste"
            ],
        toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image | fullscreen",
        setup: function(ed) {
            ed.addButton('image', {
                title: 'Insert Image',
                onclick: function() {
                    $('#myModalTinyMCE').modal('show');
                } 
            });
        }


    };

The problem is the setup function breaks the binding with the model. Content added to the editor is not synched to the model and vice-versa. I found some other users also having the same problem but none of it got the answer / the answer is not work for me.

Here's the links:

angular-ui/ui-tinymce setup method in tinymceOptions breaks model binding

https://stackguides.com/questions/27227365/angularjs-angular-ui-tinymce-custom-button

https://github.com/angular-ui/ui-tinymce/issues/112

Anyone could help?

Answer 1

This is talked about on Github here

https://github.com/angular-ui/ui-tinymce/issues/112