data-binding - angularjsでディレクティブを動的にバインドする方法は?

Question

コントローラー内のオブジェクトからのデータを表示する必要があるディレクティブがあります。表示する必要のあるデータは、ディレクティブの属性と、他の dom 要素に基づくその他の計算によって決定されます。

簡単な例を次に示します。

私はこのデータを持っています：

app.controller('EditorCtrl', function($scope) {
    $scope.blocks = {
        header: 'text1',
        body: 'text2',  
    };
});

そして、このディレクティブで表示したい:

app.directive('editable', function() {
    return {
        template: 'data: {{val}}',
        link: function(scope, element, attrs) {
            element.wrap('<div class="editable"></div>');
            data = scope.blocks[attrs.editable];
            val = data;
        }
    }
});

そしてHTMLで：

<h1 editable="header">text1 should be displayed here</h1>
<h1 editable="body">text2 should be displayed here</h1>

どうすればこれを達成できますか? 私は正しい方法で問題に取り組んでいますか?