AngularJS - two ng-repeats where first.id =second.id - angularjs

Question

I am trying to show name of city against the city id I receive from branches. What is the angular way of doing it?
$http.get(baseURL + '/city/getList?token=' + token)
.then(function(response) {
$scope.cities = response.data.data;
});
$http.get(baseURL + '/store/getAllBranch?token=' + token)
.then(function(response) {
$scope.branches= response.data.data;
});
<tbody>
<tr ng-repeat="x in branches| orderBy:'name'">
<td>{{x.name}}</td>
<td>{{x.address}}</td>
<td ng-repeat="city in cities track by x.city">{{city.name}}</td>
</tr>
</tbody>

Answer 1

Create a filter to convert cityID to cityName
<tbody>
<tr ng-repeat="x in branches| orderBy:'name'">
<td>{{x.name}}</td>
<td>{{x.address}}</td>
<td>{{x.cityId | cityName}}</td>
</tr>
</tbody>
app.filter('cityName', function(cityId) {
return function(cityId){
for(var ci = 0; ci < cities.length; ci++)
{
if( cities[ci].id == cityId )
return cities[ci].name;
}
return '';
};
});
And use it like that..
But this way is not good for performance. If you could declare related city names in related branches then you can just print that to screen with no calculation.

Answer 2

The 'angular way' is to construct an object which will be data-wise identical to how your table should look like and then you'd use ng-repeat to display the info.
You say you have the city id given in your branch. So you can just construct an object in which you push all your city names:
$scope.tableInfo = [];
for(var i = 0; i < branches.length; i++) {
var tableCell = {
name: branches[i].name,
address: branches[i].address,
city: branches.filter(function(element){
for(var city in cities) {
if(element.cityId === city.id) return city.name;
}
})[0];
};
}
That [0] is there because it'll always be a 1-element array(because of the filter function).
In the HTML, just use a <table> to show the tableInfo object.
<table>
<tr ng-repeat="tableCell in tableInfo">
<td>{{tableCell.name}}</td>
<td>{{tableCell.address}}</td>
<td>{{tableCell.city}}</td>
</tr>
</table>