Trying to avoid pushing duplicates into array Angular

I have a Laravel 5.1 and Angular app.

I am returning a collection of objects to Angular from my Laravel controller. I am then trying to push new objects onto that scope variable but want to avoid pushing a duplicate.

The returned collection looks like this;

$scope.albums = [
{"id": 1,
 "name": "Pork Soda",
 "band": "Primus"}
{"id": 2,
 "name": "Fly by Night",
 "band": "Rush"}
{"id": 3,
 "name": "Freaky Styley",
 "band": "RHCP"}
]

I then present an ng-repeat of another collection;

$scope.availableAlbums = [
{"id": 1,
 "name": "Pork Soda",
 "band": "Primus"}
{"id": 2,
 "name": "Fly by Night",
 "band": "Rush"}
{"id": 3,
 "name": "Freaky Styley",
 "band": "RHCP"}
{"id": 4,
 "name": "Zenyatta Mondatta",
 "band": "The Police"}
{"id": 5,
 "name": "2112",
 "band": "Rush"}
{"id": 6,
 "name": "Truth and Soul",
 "band": "Fishbone"}
]

Now I have a function that allows the user to add a $scope.availableAlbums to the $scope.albums. The issue is, I do not want to be able to allow for a duplicate album to be added. I am using a unique filter on the repeat which stops a duplicate from being displayed but it doesn't actually stop it from being added to the array.

I have tried an indexOf argument but can't seem to get it to stop the duplicate.

I am trying this right now to find the index of the pushed object and if found don't push;

$scope.addAlbum = function(album) {

    var id = {id: album.id};

    if (!(id in $scope.albums)){
        $scope.albums.push(album);
    }
 }

However, the above is not finding the id when it does exist in the array.

This seems like something that would pretty common place. What am I missing?

Thanks!

via Chebli Mohamed