Angularjs: Directive addEventListener Error

Question

Angularjs: Directive addEventListener Error

I have created a directive to handle a file upload wit Uploadifive. The upload module is called on the opening of a modal window. The first time that I call the modal window everything works correctly. If I open the modal window again I receive the following error.

Cannot call method 'addEventListener' of undefined

I am new to this so if I don't have enough information to trouble shoot this just let me know what else is needed.

HTML

<div class="row">
<div class="span5">
    <h2>Upload New Image Gallery</h2>

    <form name="frm_upload" action="">
        <div class="control-group">
            <input image-uploadifive="{{galleryID}}" galleryid="{{galleryID}}" name="file_upload" type="file" multiple="true">
        </div><!-- /control-group -->
    </form>
    <div id="imageGallery_queue"></div>
</div><!-- /span5 -->

Directive

    myApp.directive('imageUploadifive', function ()
{
    return {
        restrict: 'A',
        link: function(scope, element, attrs, controllers)
        {
            var id = scope.galleryID;

            $(element).uploadifive({
                'uploadScript'  : '/beta/images/upload',
                'buttonClass'   : 'uploadifive-button btn btn-primary',
                'queueID'       : 'imageGallery_queue',
                'buttonText'    : 'Select Files',
                'fileSizeLimit' : 500,
                'formData' : {
                    'galleryID' : id
                },
                'onError': function(errorType)
                {
                    alert('There was a problem');
                },
                'onUpload': function()
                {
                }
            });
        }
    };
});

Controller

var myApp = angular.module('myApp',['ui.bootstrap', 'ui.sortable']);

function imageGalleryCtrl ($scope, images, clients, galleries, createGal) { $scope.galleryMaster = {};

$scope.tabs = [
    { title:"Home", content:"/beta/application/views/images/uploader/create.html", active: true },
    { title:"Upload", content:"/beta/application/views/images/uploader/upload.html"},
    { title:"Edit", content:"/beta/application/views/images/uploader/edit.html"}
];

//close modal
$scope.close = function ()
{
    $scope.imageUploader = false;
};

//get gallery info on click from table
$scope.getGallery = function(id)
{
    //set gallery ID to scope
    $scope.galleryID = id;

    //open the modal
    $scope.imageUploader = true;

    //get gallery information
    $scope.galleryCollection = galleries.getGallery(id);

    $scope.galleryCollection.then(function(galleries){
        $scope.gallery = galleries.thisGal;
    });

    //get clients
    $scope.clientCollection = clients.getClients();

    $scope.clientCollection.then(function(clients){
        $scope.clients = clients.clients;
        $scope.clientList = $scope.gallery.client;
    });
};

$scope.tabName = function(name)
{
    if(name == 'Edit'){
        //get all the images 
        $scope.imgCollection = images.getImages($scope.galleryID);

        $scope.imgCollection.then(function(images){
            $scope.images         = images.thisGal_images;
            $scope.imageSortOrder = 'orgName';
        });
    }
};

$scope.newGallery = function()
{
    //open modal
    $scope.imageUploader = true;
    //create gallery
    $scope.newGallery = createGal.createGal();
    $scope.newGallery.then(function(createGal){
        $scope.galleryID = createGal.created_id;
    });
};

Any insight on this would be a great help. Thanks

angularjs