Angular, пытаясь прочитать файл перед его загрузкой на сервер и обработать его

У меня есть область ng-drop, которая позволяет пользователю загружать файлы в формате STL на сервер. Прежде чем эти файлы будут отправлены на сервер, я пытаюсь открыть и создать миниатюру с помощью библиотеки three.js.

Сначала я создаю «локальную» копию, т.е. заставить FileReader читать загруженный файл в браузере:

    //File-upload related
    $scope.$watch('download.files', function () {
        if ($scope.download.files != null) {
            for(var i=0;i<$scope.download.files.length;i++) {
                var reader = new FileReader();
                //var objData;
                var file = $scope.download.files[i];

                reader.onload = (function(theFile) {
                    return function(e) {
                        for (var x=0;x<$scope.filesInUploadList.length;x++){
                            if (file.name == $scope.filesInUploadList[x].file.name) {
                                $scope.$apply(function() {
                                    $scope.filesInUploadList[x].data = e.target.result;                             
                                });
                            }
                        }
                    };
                })($scope.download.files[i]);

                reader.readAsText($scope.download.files[i]);

                $scope.filesInUploadList.push( {
                    modelId: '',
                    file: $scope.download.files[i],
                    volume: 0,
                    boundingBox: [0,0,0,0],
                    data: 99,
                });
            }

/*TODO: Continue to upload when thumbnail is done
            if ($scope.download.files != null) {
                $scope.upload($scope.download.files);
            }
*/
        }
    });

И в html у меня есть следующая угловая директива:

display data for debug: {{f.data}}
<div id="webglContainer" ng-webgl width="100" height="100"ng-attr-stlFile="{{f.data}}"></div>   

и директива ng-webgl: 'use strict';

angular.module('myApp')
  .directive('ngWebgl', function () {
    return {
      restrict: 'A',
      scope: {
        'width': '=',
        'height': '=',
        'stlData': '=stlFile',
      },
      link: function postLink(scope, element, attrs) {

    var camera, scene, renderer, light,
      data = scope.stlData,
      contW = element[0].clientWidth,
      contH = scope.height;

    scope.$watch('scope.stlData', function (value){
            console.log("scope.stlData, after:"+value);
        });

    scope.init = function () {

      // Camera
      camera = new THREE.PerspectiveCamera( 20, contW / contH, 1, 10000 );
      camera.position.z = 100;

      // Scene
      scene = new THREE.Scene();

      // Ligthing
      light = new THREE.DirectionalLight( 0xffffff );
      light.position.set( 0, 0, 1 );
      scene.add( light );

      // ASCII file
      var material = new THREE.MeshPhongMaterial( { color: 0xff5533, 
          specular: 0x111111, shininess: 200 } );
      var mesh = new THREE.Mesh( data, material );

      mesh.position.set( 0, - 0.25, 0.6 );
      mesh.rotation.set( 0, - Math.PI / 2, 0 );
      mesh.scale.set( 0.5, 0.5, 0.5 );

      mesh.castShadow = true;
      mesh.receiveShadow = true;

      scene.add( mesh );

      renderer = new THREE.WebGLRenderer( { antialias: true } );
      renderer.setClearColor( 0xffffff );
      renderer.setSize( contW, contH );

      // element is provided by the angular directive
      element[0].appendChild( renderer.domElement );
    };

    // -----------------------------------
    // Draw and Animate
    // -----------------------------------
    scope.animate = function () {
      requestAnimationFrame( scope.animate );
      scope.render();
    };

    scope.render = function () {
      camera.lookAt( scene.position );
      renderer.render( scene, camera );
    };

    // Begin
    scope.init();
    scope.animate();
  }
};

});

Моя проблема связана с областями и отправкой данных в директиву после завершения чтения файлов. Мне не удалось настроить привязку к этому {{f.data}} в атрибуте директивы (показывает данные в строке выше с «отображать данные для отладки», поэтому, когда результат чтения файлов доступен, моя директива должна получить данные и показать 3D-модель в средстве просмотра.

Я пытался понять области действия директив и способы создания директив и привязки к ним атрибутов, но, похоже, мне не хватает некоторых знаний, которыми обладают настоящие гуру Angular.