AngularJS - Directives and Scope

HTML

<script src="http://code.angularjs.org/1.1.4/angular.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css">
<div ng-app="myapp" ng-controller="NameCtrl">
    <label>NameCtl outside: <input type="text" ng-model="data.name"></label>
    <my-container header="{{ data.name }}" footer="data.name">
        <label>NameCtl inside: <input type="text" ng-model="data.name"></label>
    </my-container>

    <script type="text/ng-template" id="container.html">
        <div>
            <label>Header @: <input type="text" ng-model="header"></label>
            <div ng-transclude></div>
            <label>Footer =: <input type="text" ng-model="footer"></label>
        </div>
    </script>
</div>

CSS

.ng-scope { border: 1px solid gray; }

JavaScript

var myapp = angular.module('myapp', [])
.directive('myContainer', function () {
    return {
        restrict: 'E', replace: true, transclude: true,
        scope: {
            header: '@'
        },
        templateUrl: 'container.html'
    };
})
.controller('NameCtrl', function($scope) {
    $scope.data = { name: 'Inital Name' };
});