javascript - Using AngularJS $compile on CKEditor contents -

i trying render angularjs directives within ckeditor instance editor area.

right now, able render directives unto separate div block, searching here on stackoverflow.

unfortunately, still unable render on preview area itself.

this current code looks like:

<div class="widget-body" ng-app="myapp">     <div compile="ckvalue"></div>         <form>             <textarea ck-editor data-ng-model="ckvalue"></textarea>         </form> </div>     <script type="text/javascript"> angular.module('myapp', [], function($compileprovider) {     $compileprovider.directive('compile', function($compile) {       return function(scope, element, attrs) {         scope.$watch(           function(scope) {             return scope.$eval(attrs.compile);           },           function(value) {             element.html(value);              $compile(element.contents())(scope);           }         );       };     });   });  angular.module("myapp").directive('ckeditor', function () {     return {     require: 'ngmodel',     link: function(scope, elm, attr, ngmodel) {       var ck = ckeditor.replace(elm[0], {             allowedcontent: true,             entities: false,             contentscss: [ckeditor.basepath + 'contents.css', '{{ asset('css/bootstrap.min.css') }}'],         } );        if (!ngmodel) return;        ck.on('instanceready', function() {         ck.setdata(ngmodel.$viewvalue);       });        function updatemodel() {           scope.$apply(function() {               ngmodel.$setviewvalue(ck.getdata());           });       }        ck.on('change', updatemodel);       ck.on('dataready', updatemodel);       ck.on('key', updatemodel);       ck.on('paste', updatemodel);       ck.on('selectionchange', updatemodel);        ngmodel.$render = function(value) {         ck.setdata(ngmodel.$viewvalue);       };     }   }; }); </script> 

how can make render angularjs directives inside editor area?