ng-filters.js

app.directive("corMediaSigaBadge", function() {
  return {
    restrict: "A",
    template: `<span class="badge {{class}}">{{value}}{{showPercent ? '%' : ''}}</span>`,
    scope: {
      value: "=",
      showPercent: "=" // boolean
    },

    link: function($scope, $elem, $attr) {
      $scope.class = "";

      if ($scope.value > 80 && $scope.value <= 100) {
        $scope.class = "badge-success";
      } else if ($scope.value > 60 && $scope.value <= 80) {
        $scope.class = "badge-info";
      } else if ($scope.value > 30 && $scope.value <= 60) {
        $scope.class = "badge-warning";
      } else {
        $scope.class = "badge-primary";
      }
    }
  };
});

// <span cor-media-siga-badge show-percent="true" value="43"></span>
// <span cor-media-siga-badge show-percent="true" value="user.media"></span>

Show de bola.