AngularJS: Connecting data to model in a directive

My intent is to have some data displayed on a page and have any changes to it reflected in the model. However, the data needs to have specific manipulations applied before display, and remain connected to the model.

For example, if the data is an html fragment, I'd be wrapping it in a DIV with attribute contentEditable. However if it's a set of options, I'll be wrapping it in a UL and LIs, each of which containing a SPAN with attribute contentEditable.

In each case, the contentEditable part should remain connected to the model.

I'm working on a JSFiddle to try to make some inroads (starting with the case where the item is an html fragment) and have labelled points (2) and (3) where I'm currently stuck. Trying to:

a) Get the watch function to notice a change to the content
b) Maintain the two way binding between the displayed editable content and the model

My fiddle is here: http://jsfiddle.net/rAXmV/

Any suggestions for how I could approach this would be much appreciated.

Edit

I've been looking into using $compile to generate the output structure and it does look like it is getting the relevant data passed in. However it's still disconnected from the model:

http://jsfiddle.net/xRQ7M/

Edit 2

After some more hacking I have a working implementation for the contenteditable areas within the supplied HTML. It picks up the changes on focusout, which is the only way I could find that bubbled up from contenteditable areas within the processed html.

A more permanent JSFiddle is here: http://jsfiddle.net/donovanh/q6auY/