JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//cdn.ckeditor.com/4.5.3/standard/ckeditor.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.4/angular.js"></script>
<body>
    <div ng-controller="DummyCtrl">
        <textarea name="{{editorName}}" ng-if="isReady" ng-model="item.content" ck-editor></textarea>
    </div>
</body>

JavaScript

var app = angular.module('app', []);

app.controller('DummyCtrl', ['$scope', '$timeout',
  function($scope, Service, $timeout) {

    $scope.isReady = false;

    $scope.item = {
        id: 1,
        title: "Title",
        content: "<h1>hello</h1>"
    };
    $scope.isReady = true;

}]);


app.directive('ckEditor', function($timeout) {
  return {
    require: '?ngModel',
    link: function(scope, elm, attr, ngModel) {

      scope.editorName = '' + Date.now();
      $timeout(function () {

        scope.$watch(function() {
          return ngModel;
        }, function (model) {

          if (model) {

            $timeout(function () {
              CKEDITOR.replace(scope.editorName);
              init();
            });

          }
        });
      }, 0);

      /**
       *
       */
      function init() {
        var ck = CKEDITOR.instances[scope.editorName];

        if (!ngModel) return;

        ck.on('instanceReady', function() {
          console.log('ready', ngModel);
          ck.setData(ngModel.$viewValue);
        });

        function updateModel() {
          console.log(ck.getData());
          scope.$apply(function() {
            ngModel.$setViewValue(ck.getData());
          });
        }

        ck.on('change', updateModel);
        ck.on('key', updateModel);
        ck.on('dataReady', updateModel);

        ngModel.$render = function(value) {
          ck.setData(ngModel.$viewValue);
        };
      }


      //scope.$on("$stateChangeStart", function() {
      //  CKEDITOR.instances[scope.editorName].destroy();
      //});

    }
  };
});

angular.bootstrap(document, ['app']);