How can I view all ng-init content? - angularjs

Question

I am doing the progress bar for each object equipment.
Here is my AngularJS code:
$scope.progressBarEquipements=function(idEquipement) {
$http.get(url+"/RestResponseCheckLists?idEq="+idEquipement)
.success(function(data) {
$scope.Pourcentage = data;
}).error(function(err, data) {
console.log("error : " +data);
});
};
This function returns $scope.progressBarEquipements=function(idEquipement):
console.log("data "+Pourcentage);
/**
* [{'NB_Resp':2,'NB_checks':154}] //For the first object And the others not
*/
Here is my HTML code:
<div class="col-md-4" ng-repeat="eq in Checksf" ng-init="progressBarEquipements(eq.idEquipements)">
<h4 class="list-group-item-heading" >{{eq.nomEq}} </h4>
<div class="progress progress-lg m-b-5" >
<div class="progress-bar progress-bar-purple" role="progressbar" ng-repeat="p in Pourcentage" ng-style="{width:{{((p.NB_Resp/p.NB_checks) * 100)}} + '%'}">
{{((p.NB_Resp/p.NB_checks) * 100) | number:0}}%
</div>
</div>
</div>
So I have four items of equipment are displayed in the html page.
The $scope.Percentage displays the progress bar calculation for the
first object only.
How to display for each object its calculation in the progress bar?
thank you in advance

Answer 1

Although, I don't like the way you are using ng-init, the following should work :
$scope.progressBarEquipements=function(eq) {
$http.get(url+"/RestResponseCheckLists?idEq="+ eq.idEquipement)
.success(function(data) {
eq.Pourcentage = data;
}).error(function(err, data) {
console.log("error : " +data);
});
};
<div class="col-md-4" ng-repeat="eq in Checksf" ng-init="progressBarEquipements(eq)">
<h4 class="list-group-item-heading" >{{eq.nomEq}} </h4>
<div class="progress progress-lg m-b-5" >
<div class="progress-bar progress-bar-purple" role="progressbar" ng-repeat="p in eq.Pourcentage" ng-style="{width:{{((p.NB_Resp/p.NB_checks) * 100)}} + '%'}">
{{((p.NB_Resp/p.NB_checks) * 100) | number:0}}%
</div>
</div>
</div>
The idea was to send your function "progressBarEquipements" the full equipment object. In that way, you are able to update it when the server responds.
I don't like the approach of using ng-init because
- the behaviour of your view is kinda hidden between your controller, and your template.
- If I had to do it, my API would give the viewmodel containing every information I need to display.