ng-if for comparing dynamic json values - html

Question

I am new to AngularJs
I have two JSON objects one is "products" and and another is "users"
I have two ng-repeat one is for product display and inside that to get user name of product i have another loop.
In the inner loop I need to check userId from product JSON and compare it with userId in User object and if matches display it in P tag.
My code is as follows:
<div class="col-md-4" ng-repeat="(key,value) in products" style="padding-top: 1.4%; padding-bottom: 1.4%;" >
<img style="height:300px;width:350px" ng-src="{{products[key].image}}"></img>
<div ng-repeat="(userkey,value) in User">
<p ng-if="User[userkey].userId == products[key].user">{{{User[userkey].name}}</p>
</div>
</div>
I have tried like this but it is displaying all users in p tag.
Can anyone please help with this

Answer 1

You could do that with filter:
oneUser in User | filter: {userId:product.user}:true
fiddle
EDIT
The way you should do that is with filters, you could use ng-show/ng-hide but you are still rendering that item as a comment, while with filter it will not. So use this for large data.

Answer 2

<div class="col-md-4" ng-repeat="product in products" style="padding-top: 1.4%; padding-bottom: 1.4%;" >
<img style="height:300px;width:350px" ng-src="{{product.image}}"></img>
<div ng-repeat="(oneUser in User">
<p ng-show="oneUser.userId == product.user">{{{oneUser.name}}</p>
</div>
</div>

Answer 3

This is what worked for me -
<div ng-repeat="p in products">
<div ng-repeat="u in users">
<p ng-show="u.userId == p.user">
{{u.name}}
</p>
</div>
</div>
Fiddle - http://jsfiddle.net/halirgb/Lvc0u55v/