Simple Angular Binding demo with directive

Externalize the time into a separate directive component.

HTML

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.angularjs.org/1.0.6/angular.min.js"></script>
<div ng-app='demo'>
    <div ng-controller='MyCtrl'>My scope's id is {{$id}}.
        <br/>My parent scope's id is {{ $parent.$id }}.
        <red-box>My scope's id is {{$id}}.
            <br/><p/>My parent scope's id is {{ $parent.$id }}.</red-box>
        <blue-box>My scope's id is {{$id}}.
            <br/>My parent scope's id is {{ $parent.$id }}.</blue-box>
    </div>
</div>

CSS

body {
    font-family: verdana, arial, sans-serif;
    font-size: 8pt
}
.bg-red {
    background-color: #FF0000;
}
.bg-blue {
    background-color: #0000FF;
    color: #FFFFFF;
}
.size-med {
    height: 100px;
    width: 600px;
}

JavaScript

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

demo.directive('redBox', function () {
    return {
        restrict: 'E',
        replace: false,
        transclude: true,
        template: '<div class="bg-red size-med"><b>I am inside a red box.</b><div ng-transclude></div></div>'
    }
});

demo.directive('blueBox', function () {
    return {
        restrict: 'E',
        replace: false,
        transclude: true,
        template: '<div class="bg-blue size-med"><b>I am inside a blue box.</b><div ng-transclude></div></div>'
    }
});

function MyCtrl($scope) {

};