angular-content-editable

Dis is a editablle mispelld header, correkt me.

The header above is enabled with the directive content-editable and you can correct it by clicking.
This is a normal non-editable paragraph instead. All the other paragraphs, but it can be anything, can be edited
simply by clicking on it.

All the elements with the directive will get the content-editable class by default, you can specify your own class with the editable-class attribute.
In this example the class change the background color on hover, to easier understand which is editable and which is not.

This paragraph has the focus-select attribute, this means when you focus or click on it, it will auto select all text inside.
So, you can easily edit it by clicking it and pressing Backspace to erase all text selected.
And remember, if you made a mess and you want to undo the changes simply press Esc and rollback to previous value.

This element is enabled with the render-html attribute that allow to modify the html code of the content. Try clicking somewhere and you will see how it works!

If you specify a valid function inside a edit callback attribute every time your model change, the callback will run
and you can make her doing all types of crazy things, like: saving the data just changed with a ajax http request, or save the data in local storage like in the example showed in this page