tinyMCE

<!DOCTYPE html>
<html ng-app="myApp">

<head>
  <link rel="stylesheet" href="style.css">
  <script type="text/javascript" src="http://admin.pickcell.io/bower_components/tinymce-dist/tinymce.js"></script>
  <script type="text/javascript" src="http://admin.pickcell.io/bower_components/angular/angular.js"></script>
  <script type="text/javascript" src="http://admin.pickcell.io/bower_components/angular-ui-tinymce/src/tinymce.js"></script>
  <script type="text/javascript" src="http://admin.pickcell.io/bower_components/angular-route/angular-route.js"></script>
  <script src="script.js"></script>
</head>

<body>
  | <a href="#/todo">todo</a> | <a href="#/step1">step1</a> | <a href="#/step2">step2</a> |
  <ng-view></ng-view>
</body>

</html>

// Code goes here

var myApp = angular.module('myApp', ['ui.tinymce', 'ngRoute']);



myApp.config([
  '$routeProvider',
  function($routeProvider) {
    $routeProvider.when('/', {
      redirectTo: '/todo'
    }).when('/todo', {
      templateUrl: 'page.html',
      controller: "TodoListController as todoList"
    }).when('/step1', {
      templateUrl: 'step1.html',
      controller: "step1"
    }).when('/step2', {
      templateUrl: 'step2.html',
      controller: "step2"
    }).otherwise({
      redirectTo: '/'
    });

  }
]);



myApp.controller("step1", [
  "$scope",
  "$rootScope",
  "$location",
  function($scope, $rootScope, $location) {
    $scope.body = "";
    $scope.nextStep = function() {
      $rootScope.body = $scope.body;
      $location.path("/step2");
    };
  }
]);

myApp.controller("step2", [
  "$scope",
  "$rootScope",
  "$location",
  function($scope, $rootScope, $location) {
    if (!$rootScope.body) {
      $location.path("/step1");
    }

    $scope.tinymceOptions = {
      selector: 'textarea',
      height: 300,
      inline: false,
      plugins: [
        "advlist autolink autosave link image lists charmap preview hr spellchecker",
        "searchreplace wordcount visualblocks visualchars code insertdatetime media nonbreaking",
        "table contextmenu directionality emoticons template textcolor paste textcolor colorpicker textpattern fullpage"
      ],
      toolbar1: "bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | styleselect formatselect fontselect fontsizeselect",
      toolbar2: "cut copy paste | searchreplace | bullist numlist | outdent indent blockquote | undo redo | link unlink image media code | insertdatetime preview | forecolor backcolor",
      toolbar3: "table | hr removeformat | subscript superscript | charmap emoticons | ltr rtl | spellchecker | visualchars visualblocks nonbreaking template restoredraft | mybutton",
      skin: 'lightgray',
      theme: 'modern',
      menubar: false,
      toolbar_items_size: 'small'
    };

  }
]);



myApp
  .controller('TodoListController', function() {
    var todoList = this;
    todoList.todos = [{
      text: 'learn angular',
      done: true
    }, {
      text: 'build an angular app',
      done: false
    }];

    todoList.addTodo = function() {
      todoList.todos.push({
        text: todoList.todoText,
        done: false
      });
      todoList.todoText = '';
    };

    todoList.remaining = function() {
      var count = 0;
      angular.forEach(todoList.todos, function(todo) {
        count += todo.done ? 0 : 1;
      });
      return count;
    };

    todoList.archive = function() {
      var oldTodos = todoList.todos;
      todoList.todos = [];
      angular.forEach(oldTodos, function(todo) {
        if (!todo.done) todoList.todos.push(todo);
      });
    };
  });

/* Styles go here */

<div>
     <h3>Step1</h3>
     <input type="text" ng-model="body">
     <button ng-click="nextStep()">Next Step</button>
   </div>

<div>
   <h3>Step2</h3>
   <textarea ui-tinymce="tinymceOptions" ng-model="body"></textarea>
   </div>

<h2>Todo</h2>
  <div>
    <span>{{todoList.remaining()}} of {{todoList.todos.length}} remaining</span>
    [ <a href="" ng-click="todoList.archive()">archive</a> ]
    <ul class="unstyled">
      <li ng-repeat="todo in todoList.todos">
        <input type="checkbox" ng-model="todo.done">
        <span class="done-{{todo.done}}">{{todo.text}}</span>
      </li>
    </ul>
    <form ng-submit="todoList.addTodo()">
      <input type="text" ng-model="todoList.todoText"  size="30"
             placeholder="add new todo here">
      <input class="btn-primary" type="submit" value="add">
    </form>
  </div>