ng-mini-conf: directives: =binding 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}}</div>
            <ddc-presenter presenter="p" />
        </div>
        <script type="text/ng-template" id="/template.html">
            <div class="right">
                {{presenter}}
                <input ng-model="presenter" />
            </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 = ['Anthony B.', 'Dave D.',
                'Jon H.', 'Michael H.', 'Rob F.'];
        }
    ]);

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