Trix-editor ng-model binding not working inside ui.bootstrap modal

[govind1246]

Observing an extremely odd behavior while using angular-trix inside an ui.bootstrap modal. Inside modal html template if "trix-editor" element is wrapped inside a div then ng-model binding doesn't work, having said that it seems to be working fine if there is no parent div. Please take a look at plunker link for the same: http://plnkr.co/edit/C4BTOHLoXV55lXDJ1tKh?p=preview.

After putting debugger in angular-trix.js i could observe that inside following code blob:

ngModel.$render = function() {   
     if (element[0].editor) {
          element[0].editor.loadHTML(ngModel.$modelValue);
     }
....

value of element[0]:

1. trix-editor when there is no parent div.
2. trix-toolbar when there is parent div.

Probably this is the reason ng-model is not working inside div, not sure why element[0] would return different result inside bootstrap modal.

[jzlosman]

Experiencing this as well. The trix-change event won't trigger as a result, nor will any custom validators.

[jinnabaalu]

By adding ng-if="true" to the element resolves the issue

Here is the solution https://github.com/sachinchoolur/angular-trix/issues/17#issuecomment-234251541

[ibnYusrat]

This solution worked.

[tjet-lw]

Haha WTF, this helped me too. Thank you! You just saved me a computer, was really near of throwing it out the window ;)