Ng-style& #39;s变量不更新到视图

我想在每次成功完成请求时向加载器栏添加20像素。来自不同api的交错数据集。在每个成功的请求上，我想在var progress 中添加20，不幸的是，即使数字在增加，$scope.progressWidth也不会更新视图。它在width: 0px处保持静态。当我尝试$scope.apply()时，它说文摘已经发生了。

<div class="loader" ng-style="progressWidth"></div>

js:

var progress = 0;
$scope.progressWidth = {
    'width': progress + 'px'
};
angular.forEach(['load::1', 'load::2', 'load::3', 'load::video'], function (value) {
    $scope.$on(value, function (event) {
        load = true;
        loaded.push(true);
        if (load === true ) {
            load = false;
            progress += 20;
        }
        if (loaded[0] === true && loaded[1] === true && loaded[2] == true && loaded[3]) {
            $scope.$broadcast('load::menu');
        }
    });
});

数据:

$http.jsonp('http://filltext.com/?rows=10&delay=1&fname={firstName}&callback=JSON_CALLBACK').
        success(function(data){
            $scope.datas[0] = data;
            console.log($scope.datas);
            $scope.$emit('load::1');
    });
    $http.jsonp('http://filltext.com/?rows=10&delay=2&fname={firstName}&callback=JSON_CALLBACK').
        success(function(data){
            $scope.datas[1] = data;
            console.log($scope.datas);
            $scope.$emit('load::2');
    });
    $http.jsonp('http://filltext.com/?rows=10&delay=4&fname={firstName}&callback=JSON_CALLBACK').
        success(function(data){
            $scope.datas[2] = data;
            console.log($scope.datas);
            $scope.$emit('load::3');
    });