AngularJS: Issue with ContentEditable

My code is as follows:

<!doctype html>
<html ng-app="flyerGen">
<head>
<script src="http://code.angularjs.org/1.0.5/angular.min.js"></script>
<script>
angular.module('flyerGen', []).directive('contenteditable', function() {
    return {
        require: 'ngModel',
        link: function(scope, elm, attrs, ctrl) {
            // view -> model
            elm.bind('keyup', function() {
                scope.$apply(function() {
                    ctrl.$setViewValue(elm.html());
                });
            });

            // model -> view
            ctrl.$render = function() {
                elm.html(ctrl.$viewValue);
            };

            // load init value from DOM
            ctrl.$setViewValue(elm.html());
        }
    };
});
function FlyerCtrl($scope) {
    $scope.Flyer = { bgColor : '231,233,230', title : 'WIE WAREN WIR HEUTE?', description: 'Bitte scannen Sie den QR-Code und geben Sie uns Feedback' }
}

</script>
</head>
<Body>
<div contentEditable ng-model="Flyer.title">{{ Flyer.title }}</div>
Test: {{ Flyer.title }}
</div>
</Body>
</html>

When loading the page I see the following error in my console: Error: No controller: ngModel. I also tried to set "FlyerCtrl", also "Flyer" instead of "ngModel", but nothing works.

Where is the mistake?

A few items:

  • HTML should have contenteditable not contentEditable
  • do not load the init value from the DOM -- you already have it in your model, so remove this from your HTML: <div...>{{ Flyer.title }}</div> and don't call $setViewValue initially.

Plunker.