Ng-style not updating fast enough
I have a progress bar
<div class="progress progress-striped" ng-class"{active: file.isUploading()}">
<div class="progress bar" role="progressbar" ng-style="{'width' : (file.sizeUploaded() / file.size * 100) + '%'}"></div>
</div>
After debugging with the chrome dev tools, I post a good width in ng style. When I stop execution (using F8 in the source code), updating the style to a good width. If I do not stop execution, the band skips slowly to 1%, and then when the load reaches 100%, the band goes from 1 to 100%.
I use ng-flow to load my files into chunks, and not one complete file.
Here are some images to show the behavior:
The first image shows that it does not update the style fast enough (the 0% bar does not show a tiny blue bar)
This is what happens when the file is fully loaded
When I press F8 in the source code of the developer tool ( Debugging), the style is updated correctly.

Here is a link to a working download example with a progress bar.
I tried using ng style file.progress (), but it does the same. While the size of the downloaded change is just fine from the debugger, it's actually just an ng style that doesn't seem to be updated.
Edit: Testing in Firefox, loading the bar is slightly faster, up to about 5-10%, when the file reaches 100%.
Edit 2:
sizeUploaded: function () {
var size = 0;
each(this.files, function (file) {
size += file.sizeUploaded();
});
return size;
}
Here is the html ...
<div flow-init flow-name="flow" class="span5 clearfix">
<div class="alert" flow-drop>
Drag And Drop your file(s) here
</div>
<span class="btn" flow-btn><i class="icon icon-file"></i> Upload File</span>
<div ng-repeat="file in flow.files">
{{file.name}} ({{file.size}} kB)
<br />
IS COMPLETE: {{file.isComplete()}}
<br />
ERROR: {{file.error}}
<br />
SIZE UPLOADED: {{file.sizeUploaded()}} kB
<br />
IS UPLOADING: {{file.isUploading()}}
<br />
{{file.sizeUploaded()}} kB / {{file.size}} kB | {{file.sizeUploaded() / file.size * 100 | number:0}}%
<div class="progress active progress-striped" ng-class"{active: file.isUploading()}">
<div class="progress bar" role="progressbar" ng-style="{'width' : (file.sizeUploaded() / file.size * 100) + '%'}">{{file.sizeUploaded()}} / {{file.size}} kB | {{file.sizeUploaded() / file.size * 100 | number:0}}%</div>
</div>
<input type="button" ng-click="file.resume()" value="Start/Resume" />
<input type="button" ng-click="file.pause()" value="Pause"/>
</div>
<table>
<tr ng-repeat="file in flow.files">
<td>{{$index+1}} | </td>
<td>{{file.name}}</td>
</tr>
</table>
</div>
: Angular 1.1.5
, , :
, Angular . , , ,
$scope.uploadProgress
$timeout ( $interval Angular 1.2), , , , .
, , :
<div class="progress progress-striped" ng-class"{active: file.isUploading()}">
<div class="progress bar" role="progressbar" ng-style="{'width' : uploadProgress + '%'}"></div>
</div>
, , Angular (file.sizeUploaded() / file.size * 100), , , , , Angular - .
, , , .
, , div :
//this object has all the info about the upload
$scope.uploadObject = {
uploadedProgress: 0
}
$scope.barStyle = function() {
return {
width: $scope.uploadObject.uploadedProgress + '%',
color: "#FFF" //Any property you may want to add
};
};
$scope.$watch("uploadObject", $scope.barStyle);
, :
<div class="progress progress-striped" ng-class"{active: file.isUploading()}">
<div class="progress bar" role="progressbar" ng-style="barStyle()"></div>
</div>