Workaround for error 10 $digest() iterations reached - angularjs

Question

I am displaying data from the database (using Web API) on the page:
<div ng-repeat="Item in Items">
<div class="row">
<div class="col-sm-3">{{Item.Id}}</div>
<div class="col-sm-3">{{Item.Desc)}}</div>
<div class="col-sm-6">{{Item.CollectionID}}</div>
</div>
</div>
the above works fine, but when I try getting actual Collection Name, I get an issue:
<div ng-repeat="Item in Items">
<div class="row">
<div class="col-sm-3">{{Item.Id}}</div>
<div class="col-sm-3">{{Item.Desc)}}</div>
<div class="col-sm-6">{{GetCollectionName(Item.CollectionID)}}</div>
</div>
</div>
here is my controller function for getting Collection Name:
$scope.GetCollectionName = function (CollId) {
$http.get('http://Server/App/api/GetCollName/' + CollId).
then(function (result) {
$scope.CollectionName = result.data;
return $scope.CollectionName;
});
}
is there a better way to do this besides modifying my underlying query?

Answer 1

The basic idea here is to use ng-init to initialize a local CollectionName variable for each Item in your ng-repeat. You can then use that local variable to output CollectionName[Item.CollectionID].
Here's a working demo
<div ng-repeat="Item in Items" ng-init="GetCollectionName(Item.CollectionID)">
<div class="row">
<div class="col-sm-3">{{Item.Id}}</div>
<div class="col-sm-3">{{Item.Desc)}}</div>
<div class="col-sm-6">{{CollectionName[Item.CollectionID]}}</div>
</div>
</div>
$scope.CollectionName = [];
$scope.GetCollectionName = function (CollId) {
$http.get('http://Server/App/api/GetCollName/' + CollId)
.then(function (result) {
$scope.CollectionName[CollId] = result.data;
});
}

Answer 2

It is bad practice to call the function inside loop. And you are using expression tag in angularjs which creates watcher. Always make sure all the necessary records to display is already in the associated scope variable.

Answer 3

$scope.GetCollectionName = function (CollId) {
if(!$scope.someDataCheck[CollId] && !$scope.someData[CollId]){
$scope.someDataCheck[CollId] = true;
$http.get('http://Server/App/api/GetCollName/' + CollId).
then(function (result) {
$scope.someDataCheck[CollId] = false;
$scope.someData[CollId].data = result.data;
});
}
return $scope.someData[CollId];
}