Angular Transclude Directive with interpolation

HTML

<div class="border" ng-controller="editCtrl">
    <div tabs my-label="{{label}}">ds: tabs
        <br/>
        <input type="text" ng-model="name" />
    </div tabs>
</div>

CSS

.border {
    border: 1px solid gray;
    margin: 8px;
    padding: 8px;
}

JavaScript

function editCtrl($scope) {
    $scope.name = "";
    $scope.label = "Here comes the directive";
}

var mod = angular.module('mod', []);

mod.directive('tabs', function () {
    return {
        restrict: 'E',
        transclude: true,
        template:
        '<span id="label">{{myNewLabel}}</span><div class="border" ng-transclude></div>{{name}}',
        link: function(scope, element, attrs) {
            attrs.$observe('myLabel', function (newValue) {
                scope.myNewLabel = newValue;
            });
        }
    };
})