Edit in JSFiddle

(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.'];
            
            $scope.getOrder = function(p) {
                return $scope.presenters.indexOf(p) + 1;
            };
            
            $scope.remove = function(p) {
                $scope.presenters.splice($scope.presenters.indexOf(p), 1);
            };
        }
    ]);

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

<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}}" is="getOrder(p)" remove="remove(p)" />
        </div>
        <script type="text/ng-template" id="/template.html">
            <div class="right">
                {{is(presenter)}}. {{presenter}} <span class="boom" ng-click="remove(presenter)">[&times;]</span>
            </div>
        </script>
    </div>
</div>

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

.left, .right {
    display: inline-block;
}

.left {
    width: 200px;
}

.right {
    width: 300px;
}

.boom {
    width: 20px;
    float: right;
    color: #BB1212;
    transition: color 4s;
}

.boom:hover {
    color: red;
    cursor: pointer;
    transition: color 1s;
}