My code should display a progress bar using ui-bootstrap-tpls-0.10.0.js (newest one). It works fine with all browser, instead of IE. Using IE 11 the progress bar is every time white. If I click on this bar, the percentage number gets visible as text (e.g. 45%). But I never see a colored bar. If I replaced style="width: {{ calculationStatus.progress }}% by a fixed value, e.g. style="width: 42% it works as it should. But I do not want to put a fix value there. I needed the case of dynamically parsing the data. Here the recent code part:
<div class="details" ng-if="view.section == 'details'">
<button ng-click="view.section = 'overview'" class="btn btn-default btn-sm pull-right" type="button" translate="shared.backToResultVersionOverview"></button>
<h2>{{ 'shared.resultDetailsTitle' | translate }}{{ currentVersion.name }}</h2>
<div class="overAll">
<p translate="shared.overAllTitle"></p>
<div class="stepLeft">
<div class="progress">
<div ng-class="{'progress-bar-success': calculationStatus.progress == 100, 'progress-bar-warning': calculationStatus.warning, 'progress-bar-danger': calculationStatus.error}" class="progress-bar" role="progressbar" aria-valuenow="{{ calculationStatus.progress }}" aria-valuemin="0" aria-valuemax="100" style="width: {{ calculationStatus.progress }}%">
{{ calculationStatus.progress }}%
</div>
</div>
<button ng-disabled="calculationStatus.progress != 100" ng-click="showResult(currentVersion)" ng-class="{'btn-default': calculationStatus.progress == 100}" class="showResult btn btn-sm" type="button" translate="shared.showResultOfStep"></button>
</div>
...
</div>
It would be glad, if somebody can help me to solve this problem.
I fould also some other blogs regarding this topic and they mentioned, that this problems occurs by IE 8-10 and that this was solved by the new AngularJS libraries. But as it seems in my case it does not work.
So what can I do?
If you have any idea, please send me a longer explanation also, since I am very new with Angular JS.