Custom AngularJS directive for uploading/dloading files

<!DOCTYPE html>
<html data-ng-app="LoaderApp">

  <head>
    <link data-require="bootstrap-css@*" data-semver="3.0.0" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />
    <link data-require="bootstrap@*" data-semver="3.0.0" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />
    <script data-require="jquery@*" data-semver="2.0.3" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
    <script data-require="bootstrap@*" data-semver="3.0.0" src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
    <script data-require="angular.js@*" data-semver="1.2.0-rc2" src="http://code.angularjs.org/1.2.0-rc.2/angular.js"></script>
    
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body>
    <div data-ng-controller="testCtrl">
      Select your file...
      <data-np-filereader data-ng-model="model.blob"></data-np-filereader>
      You've selected {{model.blob.filename}}{{model.blob.filesize}}
      <div>Here is some base64 data from it: {{model.blob.filedata}}</div>
    </div>
  </body>
</html>

// Code goes here

function npFilereader($timeout) {

    return {
        restrict: 'E',
        require: '?ngModel',
        replace: true,
        template: '<div>' +
                      '<button style="width:30px" data-ng-click="selectFile()">+</button>' +
                      '<button style="width:30px" data-ng-click="clearFile()">-</button>&nbsp;' +
                      '<a style="cursor:pointer; text-decoration:underline; width:120px; max-width:120px" ' +
                      '   data-ng-click="download()">{{model.filename}}{{model.filesize}}</a>' +
                      '<input style="position:absolute; opacity:0; top:0px; right:0px" ' +
                      '       type="file" data-ng-model="model.filedata" />' +
                  '</div>',
        scope: { blob:'=ngModel' },

        link: function(scope, element, attrs, ngModel) {
            if(!ngModel) return;

            console.log("link()");
            var model = scope.blob;
            scope.model = model; // for use from within the template

            $timeout(function() { scope.$apply(); }, 0);

            scope.selectFile = function() {
                console.log("selectFile()");
                element.find('input').click();
            }
            scope.clearFile = function() {
                console.log("clearFile()");
                scope.blob.filename = undefined;
                scope.blob.filedata = undefined;
                scope.blob.filesize = "";
            }
            scope.download = function() {
                console.log("download("+scope.filename+")");
            }
            ngModel.$render = function() {
                console.log("render()");
            };

            $(element).find('input').bind('change', function(e) {
                var element = e.target;
                var options = {promise: undefined};

                if (element.files.length > 0) {
                    var filename = element.files[0].name.slice(0);
                    console.log("added...");
                    var reader = new FileReader();
                    reader.onload = function(e){
                        // The input was solid!
                        var values = e.target.result;
                        // So, clear any error popovers
                        if (options.promise !== undefined) {
                            $timeout.cancel(options.promise);
                            element.popover('destroy');
                        }
                        // ...and update the model.
                        model.filename = filename;
                        //model.filedata = '';
                        model.filedata = values;
                        var lengthInBytes = values.length;
                        model.filesize = " (" + lengthInBytes + " bytes)";
                        ngModel.$setViewValue(model);
                        $timeout(function() { scope.$apply(); }, 0);
                    }
                    reader.onerror = function(e) {
                        showError(
                            ' Σφάλμα κατά την ανάγνωση του αρχείου "'+filename+'"',
                            element, options, $timeout);
                    }
                    reader.readAsDataURL(element.files[0]);
                } else {
                    console.log("Removed...");
                    model.filename = undefined;
                    model.filedata = undefined;
                    model.filesize = "";
                    ngModel.$setViewValue(model);
                    $timeout(function() { scope.$apply(); }, 0);
                }
            });
        }
    };
}

function testCtrl($scope) {
  var blobData = {
    filename:'oldFilename.txt',
    filesize:undefined,
    filedata:undefined
  }
  $scope.model = {blob: blobData};
}

var application = angular.module('LoaderApp', []);
application.directive('npFilereader', npFilereader);

/* Styles go here */