ng-if to hide all elements in page except 1 - angularjs

Question

I have several divs on my page which use an ng-if to show. My issue is that certain elements are duplicates.
What I would like to do is use another expression in the ng-if for this example i added below (hideMultiplePost) to hide these duplicate elements and my idea is to identify them by adding a class which uses the post id since the duplicate elements share the same id.
<div ng-repeat="post in postList">
<div class="{{post.id}}" ng-if="post.cat.length > 0 && hideMultiplePost(post.id)">
</div>
<div ng-repeat="post in postListV2">
<div class="{{post.id}}" ng-if="post.cat.length > 0 && hideMultiplePost(post.id)">
</div>
Can someone put me in the right direction in using an expression (hideMultiplePost) where I check for duplicate classes and exclude them from the frontend but leave one them as I don't want to exclude them all.

Answer 1

You could use the existing 'unique' filter supplied by angular UI.
The unique filter allows you to supply a field in your model that should be unique. I assume that all of your posts have a id and that this id is unique. You can filter out multiple posts based on this field.
After the applied filter, you can still use your ng-if statement to check if the post contains any categories.
Check the snippet for more info on how to use it.
angular
.module('app', ['ui.filters']);
angular
.module('app')
.controller('PostListController', PostListController);
function PostListController() {
var vm = this;
vm.posts = getPosts();
}
function getPosts() {
return [{
"id": 1,
"title": "Post Title",
"content": "Post content here"
}, {
"id": 2,
"title": "Post Title",
"content": "Post content here"
}, {
"id": 3,
"title": "Post Title",
"content": "Post content here"
}, {
"id": 4,
"title": "Post Title",
"content": "Post content here"
}, {
"id": 5,
"title": "Post Title",
"content": "Post content here"
}, {
"id": 3,
"title": "Post Title",
"content": "Post content here"
}, {
"id": 4,
"title": "Post Title",
"content": "Post content here"
}];
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui/0.4.0/angular-ui.js"></script>
<div ng-app="app">
<div ng-controller="PostListController as vm">
<ul>
<li ng-repeat="post in vm.posts | unique:'id'">
<b>#{{ post.id }} {{ post.title }} </b><br />
<p>{{ post.content }}</p>
</li>
</ul>
</div>
</div>

Answer 2

If you cannot control the data in, then you can remove dupes using a filter. I have assumed it's an ng-repeat, but you can edit for your own use. More detail in fiddle.
<div ng-repeat="item in data | dedupe:'id'">
{{item.id}}: {{item.name}}
</div>
Edit:
Concat the two sources (postList and postListV2) in your controller, and then use the filter to dedupe:
function MyCtrl($scope) {
$scope.postList = postList;
$scope.data = $scope.postList.concat(postListV2)
}
More info in the fiddle:
http://jsfiddle.net/Lvc0u55v/7736/