scope variable is not accessed in angularjs in internet explorer

Question

I have a custom directive in which i am calculating width and assigning it into scope variable. That scope variable is being accessed in html which is working fine in firefox and chrome. But not in Internet explorer.

code in controller

cellWidth: 160 // property of an object

Code in directive

for (var i = 0; i < totalColumns; i++) {
    scope.columnMapping.columns[i].tempCellWidth = scope.columnMapping.columns[i].cellWidth * 100) / tableWidth;
}

HTML

<div style="width: {{column.tempCellWidth}}%;"> {{columnName}} </div> // IE does not evaluate this.. 

IE shows width: {{column.tempCellWidth}}% while inspecting an element.

Thanks in advance.

Answer 1

You need to use the ng-style attribute instead of style directly.

<div ng-style="{ width: column.tempCellWidth }"> {{columnName}} </div>

Also to append the percentage sign (%), you should do it in your for loop

for (var i = 0; i < totalColumns; i++) {
    scope.columnMapping.columns[i].tempCellWidth = (scope.columnMapping.columns[i].cellWidth * 100) / tableWidth) + '%';
}