AngularJs $scope.$apply not working as expected

Question

I am using this controll: http://blueimp.github.io/jQuery-File-Upload/angularjs.html to do file uploading in angular, once the file is uploaded to my server I return a url and would like to display it to the client on the success callback. The plugin being used is just a normal jquery file upload but there is a angular directive wrapper provided which I'm using.

Here's how I define the callback:

$scope.options = {
    url: '/api/Client/',
    type: 'PUT',
    done: function (event, data) {
        var scope = angular.element(this).scope();
        scope.test = "doesn't work";
        scope.$apply(function () {
            scope.test = "this doesn't work either";
        });
    }
};

The file uploads fine, and the done function is called however I am unable to update the view. I initially tried by just changing scope, then I realised I would require the $apply() function but that isn't working either.

I have also tried

$scope.options = {
    url: '/api/Client/',
    type: 'PUT',
    done: function (event, data) {
        $scope.test = "doesn't work";
        $scope.$apply(function () {
            $scope.test = "this doesn't work either";
        });
    }
};

and that also doesn't work. I am not sure why it isn't updating my view, and as the done call is just an ajax success event I don't see how this specific plugin could be causing any issues with $scope.$apply. I am using AngularJs 1.1.5, but I have also tried 1.0.7 and am getting the same issue.

Answer 1

Copied from my comment to make it clearer what the problem was:

I managed to figure out the problem. When using their example I had a duplicate of ng-controller(Their example was nested within my other controller) and even though both were using the same controller it seems like it would only update anything that was within nested controller scope. When removing the duplicate ng-controller attribute it all works fine.

Answer 2

I thought I would chime in too, as I've spent a whole day dealing with this issue.

Make sure that in your HTML, you apply the ng-controller to a div wrapper, not a ul element.