javascript - How to add CKEditor instances inside Controller scopes with AngularJS and CKEditor -

he there all,

lately ve been experimenting angular js. goes nice, controllers, services etc.

when try make div editable inside ng-controller ckeditor toolbar not popup. other div outside controller works fine.

html:

<!-- begin dynamic content angularjs -->     <div id="js_enabled" class="js_enabled" ng-controller="boxes_controller">         <div class="box" ng-repeat="box in boxes" style="min-width: {[{ boxes_width }]}%; width:  {[{ boxes_width }]}%; max-width: {[{ boxes_width }]}%;">             <p contenteditable="true"> asd</p>             <div class='box-content'>                     <p>                     <b>{[{ box.title }]}</b><br/>                     {[{ box.description }]}                     </p>             </div>         </div>     </div> <!-- end dynamic content angularjs --> 

the {[{}]} interpolation override. if can see there small 'p' element contenteditable testing. element not show ckeditor bar. tested it's not css. toolbar div elements ckeditor not created , no errors exist.

ps. if make other element editable outside controller scope, works well.

made easy directive.

just load ckeditor.js , code is:

mainapp.directive('ckeditor', function() {     return {         restrict: 'a', // activate on element attribute         scope: false,         require: 'ngmodel',         controller: function($scope, $element, $attrs) {}, //open         link: function($scope, element, attr, ngmodel, ngmodelctrl) {             if(!ngmodel) return; // nothing if no ng-model might want remove             element.bind('click', function(){                 for(name in ckeditor.instances)                     ckeditor.instances[name].destroy();                 ckeditor.replace(element[0]);             });         }     } }); 

supports multiple instances