Why this angularjs example doesn't work on plunker?

Question

In this angular document: http://docs.angularjs.org/guide/concepts, there is an example about Directives.

Directives

A directive is a behavior or DOM transformation which is triggered by the presence of a custom attribute, element name, or a class name. A directive allows you to extend the HTML vocabulary in a declarative fashion. Following is an example which enables data-binding for the contenteditable in HTML.

It provides two live demo, one for plunker, another for jsfiddle.

• plunker: http://plnkr.co/edit/nsAUafYFA1tHPo52TWUm?p=preview
• jsfiddle: http://jsfiddle.net/rnL84/

Why the jsfiddle one works well but the plunker one doesn't work? They have exactly the same code, and there is no error in the console.

Answer 1

Replace the script provided by Plunker with

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>

Answer 2

The plunker has ng-app instead of ng-app='directive' in the index.html.

The module (named directive in this example) defined in the script.js javascript file needs to be specified in the ng-app for it to pick up the contenteditable directive:

angular.module('directive', [])...

See this plunker for a working version.