ANGULARJS - $scope does not apply the first time I

Question

I have a problem with my angularjs controller. It goes like this

I am triggering an async method on button click, this method shows a dialog with an input text, once you close the dialog, that text is added to a scope array, However, the first time I execute the async method the view does not reflect the changes in the scope, if I click a second time and the function gets called again then I can see all the changes in my view (including the first change I made and didn't see immediately)

Here is my sample code

var afterUpload = function (result) {
    vm.testme = result;     
    vm.pdfs.list.push({ systemFilename: 'test', note: 'test' });
    $scope.pdfs.push({ systemFilename: 'test', note: 'test' });

}

$scope.upload = function (files) { 
        var modalOptions = {
            closeButtonText: 'Ok',
            actionButtonText: 'Accept',
            headerText: 'File upload',
            bodyText: 'Please type the name of the file',
            modalTemplate: '/MiniSpa/app/templates/modal/file-modal.html'
        };

        modalService.showModal({}, modalOptions).then(function(result) {
            $scope.$evalAsync(function () { afterUpload(result); });
}

Any ideas?

Answer 1

Put the code inside $timeout which opens the dialog. It should resolve the issue.

Example:

$scope.upload = function() {
 ...
 $timeout(function() {
     // put code here which opens dialog
 }, 200);
}