ng-mini-conf: directives: "new scope" demo

HTML

<div ng-app="ddc">
    <div ng-controller="DdcController">
        <div class="hd left">Controller Scope</div>
        <div class="hd right">Directive Scope</div>
        <div ng-repeat="p in presenters">
            <div class="left">{{p.name}}</div>
            <ddc-presenter presenter="p" />
        </div>
        <div>
            <div class="left">{{foo}}</div>
            <ddc-foo />
        </div>
        <script type="text/ng-template" id="/template.html">
            <div class="right">
                {{p.name}}
                <input ng-model="p.name" />
            </div>
        </script>
        <script type="text/ng-template" id="/ddc-foo.html">
            <div class="right">
                {{foo}}
                <input ng-model="foo" />
            </div>
        </script>
    </div>
</div>

CSS

.hd {
    font-weight: 800;
    font-size: 1.2em;
}

.left {
    display: inline-block;
    width: 200px;
}

.right {
    display: inline-block;
    width: 300px;
}

.right input {
    width: 100px;
    float: right;
}

JavaScript

(function(ng, ddc) {
    ddc = ng.module('ddc', []);

    ddc.controller('DdcController', ['$scope',
        function($scope) {
            $scope.presenters = [
                {name:'Anthony B.'},
                {name:'Dave D.'},
                {name:'Jon H.'},
                {name:'Michael H.'},
                {name:'Rob F.'}
            ];
            
            $scope.foo = 'bar';
        }
    ]);

    ddc.directive('ddcPresenter', function() {
        return {
            restrict: 'E',
            templateUrl: '/template.html',
            replace: true,
            scope: true
        };
    });
    
    ddc.directive('ddcFoo', function() {
        return {
            restrict: 'E',
            templateUrl: '/ddc-foo.html',
            replace: true,
            scope: true
        };
    });
}(angular));