Well, I’ll leave an example with $compile really, take a look.
Example with JSON and ngRepeat:
var app = angular.module('app', ["ngAnimate","ui.bootstrap"]);
app.directive('compile', function ($compile) {
return {
restrict: 'A',
link: function ($scope, $element, $attrs) {
var html = $attrs.compile;
$scope.$watch($attrs.compile, function(html) {
$element.html(html)
$compile($element.contents())($scope);
});
}
};
});
app.controller('compileProgressBar', function($scope) {
$scope.createProgressBar = function(value, max, type){
return '<uib-progressbar class="progress-striped active" max="'+ max + '" value="'+ value + '" type="'+type+'"><i>'+ value + ' / '+ max + '</i></uib-progressbar>'
}
$scope.empresas = [
{name: "Empresa 1", progress: 80, typeBar: "sucess"},
{name: "Empresa 2", progress: 20, typeBar: "danger"},
{name: "Empresa 3", progress: 50, typeBar: "warning"}
];
})
.progress {
height: 20px;
}
.progress i{
line-height: 20px;
}
.progress-bar {
transition: width 1s ease-in-out;
}
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.0.1.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<h2>Compile dynamic uiProgressBar in ngRepeat</h2>
<hr>
<div ng-app="app" ng-controller="compileProgressBar">
<div ng-repeat="empresa in empresas" >
{{empresa.name}} <div compile="createProgressBar(empresa.progress, 100, empresa.typeBar)"></div>
</div>
</div>
Explaining...
Javascript
I create the progressiBar from a directive. So, first I create the directive calling for compile. It will be applied to the element that will progress.
In the return object of the directive, I restrict the parameter (restrict: 'A'). So it can only be used as an attribute of a tag, as used in the examples, and not <compile></compile>. Which can be changed, but would also change the Controller.
In the link, function inside the object to manipulate the DOM, assign the arguments $scope, the $element and $attrs.
Within the function, I use the $scope.$watch, a function that "listens" for changes in something. In this case, listen for changes in the directive compile and to each world executes the callback.
In the callback use .html() to modify the content of div which is the directive. The new content will have what will be passed within the attribute compile, in the example, is the variable html who receives $attrs.compile.
And finally, I use the $compile even, which takes as an argument the content of the element ($element.contents()). Also passing the $scope for the function.
Note: In your case, it is important to inject dependence ["ui.bootstrap"].
HTML
In this example I pass a function that returns to a bar with values modified by its arguments, as in your example. The arguments of the function, in this case, are given from the JSON itself ngRepeat, in the case empresa.progress and empresa.typeBar. I know that the uiProgressBar could come in HTML itself, but as the intention is to show the use of $compile, a let being returned as string in function.
Any problems regarding implementation I ask you to warn, to try to solve.
I hope I helped. Hug.