i'm trying to create some circles that auto resize. the problem is that the ng-style attribute isn't updating the styles. see plunker

Javascript :

$scope.sellingPoints = {
    '1':{ 'text':'Newest Technologies'},
    '2':{ 'text':'Rapid Development'},
    '3':{ 'text':'Scaleable Solutions'},
    '4':{ 'text':'Custom CMS'}  
};

$scope.kpi = {};
$scope.sizes = {};
$scope.onResize = function() {
    console.log('joe');
    var kpifit = document.getElementById('fit');
    $scope.sizes.width = kpifit.offsetWidth - 30;
    $scope.kpi.width = $scope.sizes.width + 'px';
    $scope.kpi.height = $scope.sizes.width + 'px';  
    console.log($scope.sizes.width);
} 

angular.element($window).bind('resize', function() {
    $scope.onResize();
})
$timeout(function() {
    $scope.onResize();
}, 300);

html :

<div class="row no-margin">
    <div class="col-md-3 col-xs-6" id="fit" ng-repeat="item in sellingPoints">
        <div class="kpi" ng-style="{'width':kpi.width,'height':kpi.height}">
            <div class="kpi-text">{{item.text}}</div>
        </div>
    </div>
</div>

i'm trying to create some circles that auto resize. the problem is that the ng-style attribute isn't updating the styles. http://plnkr.co/edit/3HxSzWIyUsLUW6UwFlRR see plunker

Javascript :

$scope.sellingPoints = {
    '1':{ 'text':'Newest Technologies'},
    '2':{ 'text':'Rapid Development'},
    '3':{ 'text':'Scaleable Solutions'},
    '4':{ 'text':'Custom CMS'}  
};

$scope.kpi = {};
$scope.sizes = {};
$scope.onResize = function() {
    console.log('joe');
    var kpifit = document.getElementById('fit');
    $scope.sizes.width = kpifit.offsetWidth - 30;
    $scope.kpi.width = $scope.sizes.width + 'px';
    $scope.kpi.height = $scope.sizes.width + 'px';  
    console.log($scope.sizes.width);
} 

angular.element($window).bind('resize', function() {
    $scope.onResize();
})
$timeout(function() {
    $scope.onResize();
}, 300);

html :

<div class="row no-margin">
    <div class="col-md-3 col-xs-6" id="fit" ng-repeat="item in sellingPoints">
        <div class="kpi" ng-style="{'width':kpi.width,'height':kpi.height}">
            <div class="kpi-text">{{item.text}}</div>
        </div>
    </div>
</div>

• javascript
• angularjs
• css

• Is this code inside a directive? Or inside a normal page? If it's in a page, I think you should call controllerName.kpi.width or something in that order. – Steven Lemmens Commented May 22, 2015 at 8:33

2 Answers 2

Handlers bound with angular.element.prototype.bind (and on) methods don't trigger digest by itself. So you need to do it manually:

angular.element($window).bind('resize', function() {
    $scope.onResize();
    $scope.$apply();
});

Demo: http://plnkr.co/edit/dPphd7KkQC7jNqleEgHb?p=info

If you want width value in ng-style using function

This below example is use for progress bar chart.

$scope.ChartDataList = [{
        Ch_Name: 'Document',
        Ch_Percentage: '40%',
        getMaxLength() {
            return '40%';
        }
    }, {
        Ch_Name: 'Video/Audio',
        Ch_Percentage: '66%',
        getMaxLength() {
            return '66%';
        }
    }
}]