Average star rating using angular directive

Question

I'm using following ref to generate stars for average rating value. This code works fine in chrome and fills stars basing on values. But in IE it shows all stars filled irrespective of value. Issues I found is dynamic value to set width is not taking in IE.can some help?enter code herecode pen link

Code:

html:<div ng-app="app" ng-controller="RatingCtrl" class="container">
  <h1>Angular Star Rating Directive</h1>
  Average Rating: {{ averageRating }}
  <div class="average">
    <average-star-rating ng-model="averageRating" max="5"><average-star-rating>    
  </div>

</div>

css:

@import "compass/css3";

.rating {
  margin: 0;
  padding: 0;
  display: inline-block;

  li {
    padding: 1px;
    color: #ddd;
    font-size: 20px;
    text-shadow: .05em .05em #aaa;
    list-style-type: none;
    display: inline-block;
    cursor: pointer;
    &.filled {
      color: #fd0; //#21568b
    }
  }
  &.readonly li.filled {
    color: #666;
  }
}

.average-rating-container {
  position:relative;
  height:31px;
  width:103px;
  overflow:hidden;

  .background,
  .foreground {
    position: absolute;
    top:0;
    left:0;
    overflow:hidden;
    white-space: nowrap;
  }
}

js:

angular.module("app", [])
.controller("RatingCtrl", function($scope) {

  $scope.averageRating = 3.5;


})

.directive("averageStarRating", function() {
  return {
    restrict : "EA",
    template : "<div class='average-rating-container'>" +
               "  <ul class='rating background' class='readonly'>" +
               "    <li ng-repeat='star in stars' class='star'>" +
               "      <i class='fa fa-star'></i>" + //&#9733
               "    </li>" +
               "  </ul>" +
               "  <ul class='rating foreground' class='readonly' style='width:{{filledInStarsContainerWidth}}%'>" +
               "    <li ng-repeat='star in stars' class='star filled'>" +
               "      <i class='fa fa-star'></i>" + //&#9733
               "    </li>" +
               "  </ul>" +
               "</div>",
    scope : {
      averageRatingValue : "=ngModel",
      max : "=?", //optional: default is 5
    },
    link : function(scope, elem, attrs) {
      if (scope.max == undefined) { scope.max = 5; }
      function updateStars() {
        scope.stars = [];
        for (var i = 0; i < scope.max; i++) {
          scope.stars.push({});
        }
        var starContainerMaxWidth = 100; //%
        scope.filledInStarsContainerWidth = scope.averageRatingValue / scope.max * starContainerMaxWidth;
      };
      scope.$watch("averageRatingValue", function(oldVal, newVal) {
        if (newVal) { updateStars(); }
      });
    }
  };
});

Answer 1

It's because IE is being difficult.

Before Angular has compiled the bindings, IE will see this attribute:

style="width:{{filledInStarsContainerWidth}}%"

IE finds this invalid and replaces it with:

style=""

A simple workaround is to use ng-attr-style instead:

ng-attr-style="width:{{filledInStarsContainerWidth}}%"

Demo: http://codepen.io/anon/pen/ZbVGRP