javascriptjqueryangularjsjhtmlarea

AngularJS model value not updated when I use editor

I am using Jhtmlarea and this is my directive:

test.directive('jhtml', function () {
        return {
            restrict: 'A',            
            replace: false,
            link: function (scope, elem, attr) {
                $(elem).htmlarea({
                    toolbar: [
                   ["bold", "italic", "underline"],
                   ["p", "h1", "h2", "h3", "h4", "h5", "h6"],
                   ["link", "unlink"]]
                });
            }
        }
    });

and this is my code: 

<textarea cols="48" rows="17" ng-model="emailDetails.message" jhtml></textarea>

I can correctly see my textarea turned into editor but when I type into editor my model is not updated. What am I missing? What changes should I implement in the above code?

Any help is greatly appreciated.

Solution

  • Consider to use textAngular, it is very well documented. It can save Your time :).

    On main page You have example how to perform "update" after text change.

    And on codepen codepen :)