Angular dial width using ng style

Question

I want to dynamically resize a div when an event is fired from S3.

In the following code, I send a variable progressto a function updateProgressas a parameter. This feature is in the highest area of ​​my Angular controller.

s3.upload(params).on('httpUploadProgress', function(evt) {
        var progress;
        progress = Math.floor(evt.loaded * 100 / evt.total);
        updateProgress(progress);
    })
    .send(function(err, res, data) {
        if (err) {
            growl.error("We're having trouble uploading your image. Please try again!", {title: 'Whoops!', ttl: 5000});
            console.log('Error uploading' + err);
        } else {
            imgLocation = res.Location;
            postToFirebase(imgLocation);
        }
    });

Here is my updateProgress function

function updateProgress(percent) {
    $scope.progressBar = {
        'width': percent + '%'
    }
}

HTML

<div ng-style="progressBar" class="shot__image--post__progress"></div>

I can successfully execute console.log AWS event and progress value. However, when I upload an image, the width never changes.

Answer 1

Reply from Phil in the comments on this topic.

, s3 Angular, $scope $scope. $apply $scope. $applyAsync. docs.angularjs.org/api/ng/type/$rootScope.Scope#$apply. Raghu , -

, $scope.$apply() updateProgress fn.