2 way binding directive with a popover/clickover

I am really enjoying the Angular experience, but have hit the following stumbling block.

I am trying to get 2 way binding working with a popover/clickover widget in angular, but am experiencing several issues - firstly the binding only seems to kick in once I start typing in the input field, and secondly even once it does start, it doesn't seem to be particular 'reliable' - sometimes the variable in the $scope is not updated, I think the easiest way to convey this issue is to try using the UI in the jfiddle.

  element.clickover({
            global: true,
            width: 400,
            scope: {
                dto: '=dto'
            },
            content: "<div id='my-poppy' class='btn-toolbar'> Edit note :{{dto.id}} <input class='span2' ng-model='dto.note'> <button class='btn btn-success' ng-click='save(dto); '>Update</button></div>"
        }).on('shown', function () {
            $compile($("#my-poppy").contents())(scope);



        });

The jsfiddle below contains all the code. Has any one encountered this issue before?

http://fiddle.jshell.net/Bfu79/2/