Update ngModel on callback from FineUploader in Angular.js

I'm new to Angular.js and I'm trying to do an AJAX post of a file through the FineUploader library. I've tried to modify a directive I found on github with some other code but I can't seem to be able to get the returned value back to the model.

My HTML code is something along the lines of 

  <div ng-controller="Analysis"> 
    <div ng-model="analysis" fine-uploader upload-destination="upload" upload-extensions="model"></div>
  </div>

With a straightforward controller

function Analysis($scope){
    $scope.analysis = [];
}

The trick however is the directive 

angular.module('cliniccio.directives', []).
  directive('fineUploader', function() {
  return {
    restrict: 'A',
    require: '?ngModel',
    link: function($scope, element, attributes, ngModel) {
      var uploader = new qq.FineUploader({
        element: element[0],
        request: {
          endpoint: attributes.uploadDestination,
        },
        validation: {
          allowedExtensions: attributes.uploadExtensions.split(',')
        },
        text: {
            uploadButton: '<i class="icon-upload icon-white"></i> Upload File'
        },
        template: '<div class="qq-uploader">' +
                    '<pre class="qq-upload-drop-area"><span>{dragZoneText}</span></pre>' +
                    '<div class="qq-upload-button btn btn-info" style="width:auto;">{uploadButtonText}</div>' +
                    '<span class="qq-drop-processing"><span>{dropProcessingText}</span></span>' +
                    '<ul class="qq-upload-list" style="margin-top: 10px; text-align: center;"></ul>' +
                  '</div>',
        classes: {
          success: 'alert alert-success',
          fail: 'alert alert-error'
        },
        callbacks: {
          onComplete: function(id, fileName, responseJSON) {
            console.log(ngModel);
            ngModel.$modelValue.push(responseJSON);
          }
        }
      });
    }
  }});

Notice the onComplete callback which should push the model value. However the debug output 

file: {{analysis | json}}

Remains empty. Note that I have verified that the server does indeed sent the expected json back. It seems that the name of the ngModel is undefined.

I've tried various combinations, but I've come to conclude that this might not be the proper way.

I would try this in your callback:

onComplete: function(id, fileName, responseJSON) {
   //duplicate the previous view value.
   var copy = angular.copy(ngModel.$viewValue);

   //add the new objects
   copy.push(responseJSON);

   //update the model and run form validation.
   ngModel.$setViewValue(copy);

   //queue a digest.
   scope.$apply();
}

I have no way to try this without a fiddle, but it should work.

Inside your callback try this instead:

onComplete: function(...) {
    scope.analysis = responseJSON;
    scope.$apply();
}

Since your directive is not creating an isolate scope, your scope variable in your linking function should have access to all of the $scope properties that your controller has access to.

Since FineUploader is calling callbacks "outside of Angular", you need to call $apply to tell Angular that something has changed.