Display state in different views dynamically

Let’s imagine I am building a two-tabs Ionic app. There are a Dashboard tab (tab-dahs) and a Search tab (tab-search).

My search tab displays a list of groups. When I click a group I access its detail.

My router code is like this:

.state('app.group', {
    cache: false,
    url: '/group',
    views: {
      'tab-search': {
        templateUrl: 'templates/groups/group.html',
        controller: 'GroupCtrl'
      }
    },
    data: {
      authenticate: true
    },
    params: {
      group: undefined
    }
  })

And I coded a component for a group with a ui-sref link in it to access the group.html template when clicking on it:

.component('GroupListItem', {
  bindings: {
    group: '<'
  },
  template:
  `
    <div class="item item-avatar item-icon-right byf-group-item" ui-sref="app.group({group: $ctrl.group})">
      ...
    </div>
  `,
  controller: function() {}
});

To this point everything is ok. Now I want some of this groups to be displayed in my Dashboard.

So I reuse the component but when I click a group I get two problems:

Details gets displayed in the Search view not the Dashboard view
Certainly the direct consequence of point 1, sometimes the data is not displayed and I loose the back arrow
How should I write my state or my ui-sref link so that, base on the previous view, the details state gets display in the appropriate view?

Here is a codepen to illustrate my problem: here