Working with AngularJS and jquery.dataTables. Changes do not get updated

Here is the problem,

I actually try to get AngularJS working with jquery.dataTables. This dataTables looks pretty good and powerful. I found some interesting things about the way to make it work with angularJS and built a jsFiddle with the main ideas.

I have a table, built dynamically with dataTables, from a global $scope variable. This is working fine. In this table, I have a column with 3 spans : View, Edit and Delete. Each of them sets the current clicked row as the global scope $scope.currentRow variable. This table comes from a directive with isolated scope and controller (+ link).

app.directive ('dtTable', function ($compile) {
    return {
        scope:{
            //whole code in fiddle
        },
        controller:function ($scope, $element) {
            //whole code in fiddle
        },
        link:function ($scope, $element, $attrs, controller){
            //whole code in fiddle
        }
    };
}

Under the table I have 2 divs, one meant to display the currentRow data, another one to edit (and confirm by click on a button calling a scope function). They come from 2 seperated directives, without isolated scope.

app.directive('currentRowViewer',function(){
    return {
        restrict : 'E',
        template : '<div> VIEW CURRENT DATA : </div><div> ID : {{currentRow.id}} </div><div> DATA A : {{currentRow.dataa}} </div><div> DATA B : {{currentRow.datab}} </div><br/><br/>'
    };
});

app.directive('currentRowEditor',function(){
    return {
        restrict : 'E',
        template : '<div> EDIT CURRENT DATA : </div><div> ID : {{currentRow.id}} </div><div> DATA A : <input type="text" ng-model="currentRow.dataa" name="dataaEditor"/> </div><div> DATA B : <input type="text" ng-model="currentRow.datab" name="databEditor"/> </div><div> <button type="button" ng-click="confirmEdit(currentRow.index)">CONFIRM</button></div><br/><br/>'
    };
});

Notice that the 2 directives use global scope vars like currentRow.index... to "show" current selected data. (they are supposed to do so)

When I click on any of the span, the changes occur and the currentRow data is set. BUT this is not acting like it should since the new data does not appear into the directives under the table! It only does if I do click on something else, like the "strange-update-thing" button I added under the whole thing : This button is just supposed to console log a string, but click on it triggers the changes in the view! oO

The opposite works(/FAILS) the same way :

When I have data to edit in the edit div under the table. If I do confirm edits, the new data is edited and goes to the table used to generate the dataTable. At that point, the $watchCollection should trigger since the item it watches changes... But it does not and the dataTable is not re-created...

The issue probably comes from a misunderstanding on angularJs directives, or a logic problem in my example, but I'm a bit lost...

Here is the fiddle I am actually working with : http://jsfiddle.net/gea13rp2/1/

Thanks for reading / help