AngularJS Transclusion Experiment

With transclusion!

HTML

<script src="http://code.angularjs.org/1.0.1/angular-1.0.1.js"></script>
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<div ng-controller="MyCtrl">
    <h2>Parent Scope</h2>
    <input ng-model="foo"> <i>// Update to see how parent scope interacts with component scope</i>    
    <br><br>
    <p><strong>Expression:</strong> {{expressionFoo}}</p>
    <hr>
    <my-component attribute-foo="{{foo}}" binding-foo="foo" 
        local-expression-foo="showFoo(newFoo)" >
            <span>{{foo}}</span>
    </my-component>
        <my-component attribute-foo="{{foo}}" binding-foo="foo" 
        local-expression-foo="showFoo(newFoo)" >
            <span>Body: {{foo}}</span>
    </my-component>
    <my-component attribute-foo="{{foo}}" binding-foo="foo" 
        local-expression-foo="showFoo(newFoo)" >
            <span>Footer: {{foo}}</span>
    </my-component>
</div>

JavaScript

var myModule = angular.module('myModule', [])
    .directive('myComponent', function () {
        return {
            restrict:'E',
            template: '<div><h1>Hi {{ foo}}</h1><span ng-transclude></span></div>',
            transclude: true,
            scope:{

                localAttributeFoo:'@attributeFoo',
                localBindingFoo:'=bindingFoo',
                localExpressionFoo:'&'
            },
            controller:function($scope){$scope.foo = 'ba';}            
            
        };
    })
    .controller('MyCtrl', ['$scope', function ($scope) {
        $scope.foo = 'Hello!';
        $scope.expressionFoo = 'Hello Expressions!';
        $scope.showFoo = function (newFoo) {
            $scope.expressionFoo = newFoo.split('').reverse().join('');
        }
    }]);