AngularJS - Communication Between Controllers & Directive

This is an example of how to use a custom service to facilitate communicate between multiple controllers using $rootscope as an event bus. I added in a directive just for fun.

HTML

<!DOCTYPE html>
<div id="fileUploadDownload">
    <!-- <a href="#" data-ng-click="downloadFile(1010)">download</a>-->
    <div data-ng-show="IsDBFileAttached">
        <ul id="dbAttachmentFiles">
            <li data-ng-repeat="item in DBAttachedFiles">
                <a id="{{item.FileID}}" href="#" data-ng-click="downloadAttachment(item)" style="text-decoration:none;">{{item.FileName}}</a><span id="{{item.FileName}}" style='color: red; cursor: pointer' data-ng-click='removeNOCDBAttachment(item)'>&nbsp;X</span>
            </li>
        </ul>
    </div>
    <form action="/" id="dropzoneForm" name="dropzoneForm" method="post" enctype="multipart/form-data">

        <div id="dropzone" style="width: 450px; height: 250px; border: 2px dashed #ccc; color: #ccc; line-height: 250px; text-align: center;">
                Drop files here to upload<!--, or 
            <label style="position: relative;cursor: pointer;color: #3b73af;"> browse.<input style="  display: none;" type="file" multiple=""></label>-->
        </div>
        <!--<div id="uploads"></div>-->
    </form>
    <div data-ng-show="IsFileAttached">
        <ul id="attachementFiles">
            <li data-ng-repeat="item in filesToUpload">
                <span id="{{item.name}}" style='text-decoration: none; color: red; cursor: pointer' data-ng-click='removeNOCAttachment(item)'>Remove&nbsp;</span><span> {{item.name}} ({{(item.size/1024).toFixed(0)}}kb)</span>
            </li>
        </ul>
        <input type="button" name="btnUpload" id="btnUpload" value="Submit" data-ng-click="UploadFiles()" />
    </div>
    <span style="margin-bottom: 10px;">Attachments Size: {{TotalSizeOfFiles}} of 20 Mb</span>
</div>

JavaScript

// global variable outside angular
var UploadFilesList = new Array();
var TotSizeOfFiles = 0;

var dragDrop = function () {
    //alert("d1....");
    console.log("dragDrop");
    return {
        restrict: "A",
        templateUrl: "../../../HTMLPages/FileDragDrop.html",
        link: function ($scope, elem) {
            $scope.TotalSizeOfFiles = 0;
            $scope.IsDBFileAttached = false; // attachments already saved in DB
            $scope.IsFileAttached = false;  // user Attachments
            $scope.DBAttachedFiles = new Array();

            elem.bind('dragover', function (e) {
                if (e.stopPropagation) e.stopPropagation(); // stops the browser from redirecting
                e.preventDefault();
                //debugger;
                // e.dataTransfer.effectAllowed = 'copy';
                //if (e.originalEvent.dataTransfer) {
                //    //e.originalEvent.dataTransfer.effectAllowed = 'none';
                //    e.originalEvent.dataTransfer.dropEffect = 'none';
                //}
                return false;

            });
            elem.bind('dragenter', function (e) {

                if (e.stopPropagation) e.stopPropagation(); // stops the browser from redirecting
                e.preventDefault();
                //if (e.originalEvent.dataTransfer) {
                //    //debugger;
                //    e.originalEvent.dataTransfer.dropEffect = 'none';
                //}
                //debugger;
                $scope.$apply(function () {
                    //$scope.divClass = 'on-drag-enter';
                });
            });
            elem.bind('dragleave', function (e) {
                if (e.stopPropagation) e.stopPropagation(); // stops the browser from redirecting
                e.preventDefault();
                //if (e.originalEvent.dataTransfer) {
                //    var srcElement = e.srcElement ? e.srcElement : e.target;
                //    e.originalEvent.dataTransfer.dropEffect...