So i have an array of objects that is being displayed as such:

```
<div class="panel panel-default" ng-repeat="row in jobprofiles">
<div class="panel-heading">
    {{row.name}}
</div>
<ul class="list-group alt">
    <li class="list-group-item" ng-repeat="competence in row.selectedCompetence">
        <div class="media">
            <span class="pull-left thumb-sm"></span>
            <div class="pull-right text-success m-t-sm">
                <button class="btn btn-danger" ng-click="competence.remove()"><i class="fa fa-times"></i></button>
            </div>
            <div class="media-body">
                <div><a href="">{{competence.name}}</a></div>
                <small class="text-muted">{{competence.competence_type_id == 1 ? 'Faglig' : 'Personlig'}}</small>
            </div>
        </div>
    </li>
</ul>

```

as you can see that each `li` has a button where i want to remove the `competence` object of the inner array.

Can anyone tell me how i might do that?