Simple Join/Leave button for groups - angularJS

I've been working on a project lately where I'm using Laravel to create my API and backend purposes, while using AngularJS as my front-end framework.

So far, everything is working (all CRUD actions), and other stuff, though I'm breaking my head over this join/leave button.

So basically, I have a many-to-many relationship between users and tables. Pivot table is working like a charm, but I have some issues on the front-end which I can't seem to figure out.

So first off my data:

{
id: 2,
name: "Group Test",
description: "blablablabla,
created_at: "2016-04-02 14:52:54",
updated_at: "2016-04-02 16:52:54",
users: [
{
 id: 4,
    first_name: "Zetta",
    given_name: "Stiedemann",
    username: "2",
    image: "http://lorempixel.com/100/100/?48674",
    email: "[email protected]",
    created_at: "2016-04-06 13:45:52",
    updated_at: "2016-04-06 13:45:52",
    pivot: {
    group_id: 2,
    user_id: 4
    }
 },
 {
    id: 6,
    first_name: "wesley",
    given_name: "vanbrabant",
    username: "wesobi",
    image: "http://lorempixel.com/100/100/?60959",
    email: "[email protected]",
    created_at: "2016-04-06 13:45:52",
    updated_at: "2016-04-06 13:45:52",
    pivot: {
       group_id: 2,
       user_id: 6
    }
  }
]
},

Basically I want to repeat every group (I've only shown data of one group as repeating the groups is working fine with ng-repeat.

Now, to create the join/leave button (or both and only show one depending on the state) I am going by the logic that I have to scan through the users array to search for the current user his id. In my case ID 6.

So here I assume I have to create another ng-repeat. The problem is I can't seem to find the correct way to filter/set conditionals.

• If my current id is not in the users array (or in the ng-repeat), show the join button.
• If it is, show the Leave button.

This is how my view (only relevant information to my question, this is not the entire view) looks at the moment:

<div ng-controller="GroupsCtrl as gr" class="mdl-layout__content">
    <div class="mdl-grid">
        <div data-ng-repeat="group in groups">    
            <div class="mdl-card__actions mdl-card--border">
                <a ng-click="joinGroup(group.id)"
                   ng-repeat="group_user in group.users|limitTo:1">
                    <span ng-show="group_user.id == user.id">Leave</span>
                    <span ng-show="group_user.id != user.id">join</span>
                </a>
                <a ng-click="joinGroup(group.id)" ng-show="group.users.length == 0">
                    Join
                </a>
            </div>
        </div>
    </div>
</div>

So this is my somewhat hacky approach. It works... if you're the first user in the users array, else it doesn't. I realize that this is because the LimitTo only uses the first one array object found. This will work if that object's ID happens to be your user ID... but otherwise it won't.

Anyone who has any suggestion how to manipulate the second ng-repeat as to get the job done?