How to use ckeditor in angular JS app?

I'm an angularJS newbie and i need to use ckeditor for a textarea in my app.

Before i've tried it on the angular app i've done a "html only" webpage. I've generated my ckeditor package here and added the needed tags (as below) and it works like a charm.

<!DOCTYPE HTML>
<html>
<head>
        <title>CKEditor test page</title>
        <meta charset="utf-8">
</head>
<body>
    <script src='./ckeditor/ckeditor.js'></script>
        <div>
          <form>
              <label>Text input</label>
              <textarea name="text" id='editor1' class="ckeditor"></textarea>
              <input type="submit" method="GET">
          </form>
          <script>
              CKEDITOR.replace('editor1');
          </script>
        </div>
    </body>
</html>

Now i'm trying to use ckeditor for a single text area of one of the tpl "views" for my angular project and i can't get it work :( Here's the content of the tpl.html view:

<script src='./ckeditor/ckeditor.js'></script>

<div class="container">
    <div class="page-header">
        <h2>Title</h2>
    </div>
    <form role="form" class="input_form">
        <accordion>
            <accordion-group heading="Add content" is-open="false">
                <div class="form-group">
                    <label class="control-label">TEXT INPUT</label>
                    <textarea id='test' class="form-control"  rows="3" ng-model="data.body"
                              placeholder="Write your text here!"/></textarea>
                </div>
            </accordion-group>
        </accordion>
        <div class="text-right">
            <a ng-click="submitText()" class="btn btn-primary">Send text</a>
        </div>
    </form>
</div>

What is the most basic approach to get ckeditor working with an angularJS app? Could it be installing any of these directives? http://github.com/esvit/ng-ckeditor http://github.com/lemonde/angular-ckeditor

Any help would be welcome :)

Personally I like https://github.com/lemonde/angular-ckeditor. Step 1-3 are actually documented quite well in the README.md and the rest is pretty easy to develop...

  1. get the angular-ckeditor: git clone -depth=50 https://github.com/lemonde/angular-ckeditor
  2. download resoureces via bower: bower install angular-ckeditor
  3. Write yourself a controller (see example in the README.md)
  4. link your js files in your html, keep track of the order:
<script type="text/javascript" src="/angular-ckeditor/angular-ckeditor.min.js"></script>
<script type="text/javascript" src="/angular-ckeditor/bower_components/ckeditor/ckeditor.js"></script>
<script type="text/javascript" src="/yourApp.js"></script>
<script type="text/javascript" src="/yourController.js"></script>
  1. use your controller and the directive inside your html as described. If you would like to pre-initialize your editor with data from your html, you could use something like this:

data-ng-init="content='this is a text with &lt;a href=&quot;http://localhost/whatever.html&quot; target=&quot;_blank&quot;&gt;an embedded Link&lt;/a&gt;'" contenteditable="true" ready="onReady()">

or you init your model variable(s) in your controller (hardcoded or via $http).