AngularJS with ckeditor is producing an arcane error on load-Collection of common programming errors

Using the solution from this problem: Bind Ckeditor value to model text in angularjs and rails

I get the following error whenever I try to use the directive on my page.

Uncaught TypeError: Cannot call method 'unselectable' of null ckeditor.js:290
a ckeditor.js:290
(anonymous function) ckeditor.js:286
i ckeditor.js:10
CKEDITOR.event.CKEDITOR.event.fire ckeditor.js:12
CKEDITOR.editor.CKEDITOR.editor.fire ckeditor.js:13
CKEDITOR.event.CKEDITOR.event.fireOnce ckeditor.js:12
CKEDITOR.editor.CKEDITOR.editor.fireOnce ckeditor.js:13
(anonymous function) ckeditor.js:222
n ckeditor.js:202
CKEDITOR.scriptLoader.load ckeditor.js:202
(anonymous function) ckeditor.js:221
(anonymous function) ckeditor.js:209
(anonymous function) ckeditor.js:207
n ckeditor.js:202
CKEDITOR.scriptLoader.load ckeditor.js:202
CKEDITOR.resourceManager.load ckeditor.js:206
f ckeditor.js:208
(anonymous function) ckeditor.js:209
n ckeditor.js:219
(anonymous function) ckeditor.js:219
(anonymous function) ckeditor.js:396
(anonymous function) ckeditor.js:207
n ckeditor.js:202
o ckeditor.js:202
q ckeditor.js:202
(anonymous function)

I am using the following directive

var app = angular.module('Tutorial', [])
    .config(function($routeProvider, $locationProvider) {
    $routeProvider
        .when(/*routes like this */)
        .otherwise({ redirectTo: '/' })
})

app.directive('ckEditor', function() {
  return {
    require: '?ngModel',
    link: function(scope, elm, attr, ngModel) {
      var ck = CKEDITOR.replace(elm[0]);

      if (!ngModel) return;

      ck.on('pasteState', function() {
        scope.$apply(function() {
          ngModel.$setViewValue(ck.getData());
        });
      });

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

Then on my page I have

and

I’m new to angular and ckeditor, so I don’t really understand what’s going on here. I simply need to get the editor onto the page and bound to my model. If anyone knows what could be causing this error, it would help me greatly.

Thanks.

UPDATE: after @sza commented saying that the fiddle worked, I verified that it was in fact something else in my code.

I added a link to the broken page to another page so I could easily navigate to the problem page, and the editor loads correctly.

    onclick="location.href="/#/controller/view""

However, whenever I navigate to the location via the url directly, the editor does not work.

Originally posted 2013-12-01 09:11:01.