javascript - ディレクティブのトランスクルージョンされたスコープを親と同じにすることはできますか?

Question

angular にいくつかの html があるとします:

 <input type='text' ng-model='stuff' /> {{stuff}}
 <button class="primary" ng-click='dothestuff()'>Do the stuff</button>

コントローラーで次のようにします。

$scope.stuff = 'arf';
$scope.dothestuff = function () {
    $window.alert($scope.stuff);    
};

このコードは、入力を入力し、ボタンを押すと出力します。

すべてうまくいきます。

---

しかし今、要素をdivでラップするディレクティブを作成したいと考えています(そのため、暗い灰色の背景で表示されます)。

要素をトランスクルージョンしてdivでラップするディレクティブを作成します。

testapp.directive('wrapper', function () {
    return {
        restrict: 'E',
        replace: true,
        scope: false,
        transclude: true,
        template: '<div style="background:#666"><div ng-transclude></div></div>'
    };
});

しかしもちろん、このディレクティブはトランスクルードされた要素の新しいスコープを作成します。入力要素は、ボタンを押したときに出力を取得するスタッフ プロパティを参照しなくなりました。

$parent を次のように参照することで機能させることができます。

 <input type='text' ng-model='$parent.stuff' /> {{stuff}}

しかし、私はそうしないことを好みます。新しいディレクティブでラップするときに、html をできるだけそのままにしておきたいと思います。

トランスクルージョンされた要素が親スコープを直接参照するようにするにはどうすればよいですか?

ここに問題のあるjsFiddleがあります。