Replace value with API value in ng-repeat

I am listing a bunch of JSON objects to a view, but only it's category ID is included. Not the name, which I need to display. I have to make a separate $http call to process which items match. Values will not render to view. Code:

$scope.cardCategories = function(id) {
  angular.forEach($scope.categoryFilter, function(category, index){
    if (category.id == id) {
      //console.log(category.name);
      return category.name;
    } else {
      return;
    }
  })
}

value inside a simplified ng-repeat

<div ng-repeat="topic in latest">
    {{cardCategories(topic.category_id)}}
</div>

I have also attempted to write this as a filter, but the value will not display. Console shows the matches. My suspicion is that I have to process the original latest array. Thanks. 

.filter('cardCategories', function($rootScope, $state){
return function(catId) {
  if (catId !== undefined && $rootScope.cardCategories) {
    angular.forEach($rootScope.cardCategories.categories, function(category, index){
      if (category.id == catId.category_id) {
        return category.name;
      } else {
        return;
      }
    })
  }
}
})

View:

{{topic.category_id | cardCategories}}

That return statement in the forEach callback function will not return a value from the $scope.cardCategories, it returns something from the callback you provided to forEach (and angular happily ignores it). Try something like this:

$scope.cardCategories = function(id) {
  var i = $scope.categoryFilter.length; // assuming it's an array 

  while(i--) {
   if($scope.categoryFilter[i].id === id) {
     return $scope.categoryFilter[i].name;
   }
  }
};

Also -- there's no way to break (stop early) an angular.forEach loop, so for performance reasons it's better to avoid it if you're locating something inside an array/object.

You need to make sure the forEach loop doesn't do a return if the current iteration doesn't match the ID you passed in.

Take out the else condition from your if statement

$scope.cardCategories = function(id) {
  angular.forEach($scope.categoryFilter, function(category, index){
    if (category.id == id) {
      return category.name;
    }
  });
};