Custom Angular Directive not working in IE11

Question

I have a directive that displays a users progress as they complete a survey. Below is the directive:

.directive('progressBar', [function () {
  return {
    templateUrl: 'survey/survey.progressBar.tpl.html',
    replace: true,
    restrict: 'E',
    scope: {
      currentPage: '=',
      totalPages: '='
    },
    link: function ($scope, iElement, iAttrs) {
      $scope.getProgress = function() {
        var toReturn = Math.ceil(($scope.currentPage/$scope.totalPages)*100);
        if (isNaN(toReturn)) {
          return 0;
        }
        return toReturn;
      };
    }
  };
}]);

Below is the expression calling this directive:

<div class="progress-bar-container">
  <div class="progress-bar" style="width:{{ getProgress() }}%;" ng-style="width:{{ getProgress() }}%;">
    <div class="tooltip arrow-up">
      <span>{{ getProgress() }}% <span translate="SURVEY.COMPLETE"></span></span>
    </div>
  </div>
</div>

Both snippets of code display a progress bar and percentage complete as the user completes the survey on Firefox, Safari and Chrome...unfortunately it does not work on IE 10 or 11.

Anybody have any ideas what could be breaking on Internet explorer?

Answer 1

Navaneeth, apologies for the delayed response. I managed to solve the issue wit the following:

<div class="progress-bar" ng-style="{width: getProgress() + '%'}">

IE11 allegedly does not render the inline style tag, I just needed to use Angular's "ng-style" expression and everything worked out.