Custom table/list value display in the Angular 1.x

I am new in Angular JS. From the basic level, I am trying to display custom value in my list table. I have Purchase and Product table. Purchase table contains product_id.
I am getting data set for the “Purchase” by

$scope.purchases = data.purchases.content;

and the “Products” by

function getProductList() {
        AllProductsList.get(function (data) {
            console.log(data.productList);
            $scope.products = data.productList;
        });
    }

In my html page I am using

<tr ng-repeat="purchase in purchases | orderBy: sortColumnHeader:reverseSort | filter:search">
                        <td><span>{{purchase.productId}}</span></td>
                        <td><span>{{purchase.receivedAmount}}</span></td>
                        <td><span>{{purchase.purchaseDate | date:"yyyy-MM-dd"}}</span></td>
                    </tr>

I have to get those data list individually. In the result i am getting 2,4,6,…. in the productId column. I want to show the product name which i have got in the “$scope.products” replace of the numerical productId value.

what could be the solution for this situation?

Source: AngularJS