AngularJS Isolated Scope Experiment

This is a fiddle designed to illustrate isolated scope using the updated and simpler syntax. This is a take on John Lindquist's fiddle which looked like this: http://jsfiddle.net/simpulton/RUbSv/

by gorillawit

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">
    <p> Update to see how parent scope interacts with component scope</p>
    <br><br>
    
    
    
    <!-- attribute-foo binds to a DOM attribute which is always
    a string. That is why we are wrapping it in curly braces so 
    that it can be interpolated. 
    -->
    <my-component attribute-foo="{{foo}}" binding-foo="foo" isolated-expression-foo="updateFoo(newFoo)" >
        
        
        
        <!-- ATTRIBUTE BINDING WITH '@' -->
        <h2>Attribute</h2>
        <p>
            <b>get:</b> {{isolatedAttributeFoo}}
        </p>
        <p>
            <strong>set:</strong> <input ng-model="isolatedAttributeFoo">
            <br>This does not update the parent scope.
        </p>
        <br><br>
        
        <!-- BINDING WITH '=' --> 
        <h2>Binding</h2>
        <div>
            <strong>get:</strong> {{isolatedBindingFoo}}
        </div>
        <div>
            <strong>set:</strong> <input ng-model="isolatedBindingFoo">
            <div>This does update the parent scope.</div>
        </div>
        <br><br>
        
        
        
        <!-- EXPRESSIONS WITH '&' --> 
        <h2>Expression</h2>    
        <div>
            <input ng-model="isolatedFoo">
            <button class="btn" ng-click="isolatedExpressionFoo({newFoo:isolatedFoo})">Submit</button>
            <p>And this calls a function on the parent scope.</p>
        </div>
    </my-component>
</div>

CSS

body {
    font-family: sans-serif;
}
h2 {
    font-size: 2rem;
    line-height: 3rem;
}

JavaScript

var myModule = angular.module('myModule', [])
    .directive('myComponent', function () {
        return {
            restrict:'E',
            scope:{
                /* NOTE: Normally I would set my attributes and bindings
                to be the same name but I wanted to delineate between 
                parent and isolated scope. */                
                isolatedAttributeFoo:'@attributeFoo',
                isolatedBindingFoo:'=bindingFoo',
                isolatedExpressionFoo:'&'
            }        
        };
    })
    .controller('MyCtrl', ['$scope', function ($scope) {
        $scope.foo = 'Hello!';
        $scope.updateFoo = function (newFoo) {
            $scope.foo = newFoo;
        }
    }]);