Ionic app with tabs + "global" search header

I've created a plunker showing my scenario. Please take a look.

The issue is that when I click search input I get redirected to offers tab. This shouldn't happen. When I click search input in home tab, search should be shown inside home tab and not offers tab.

If I click search input in offers tab, search should be shown inside offers tab and not home tab.

Navigation is therefore messed up in my example.

Tabs

<ion-tabs class="tabs-icon-top tabs-color-active-positive">

  <ion-tab title="Home" icon-off="ion-ios-home-outline" icon-on="ion-ios-home" ui-sref="app.home">
    <ion-nav-view name="tab-home"></ion-nav-view>
  </ion-tab>

  <ion-tab title="Promoções" icon-off="ion-ios-gear-outline" icon-on="ion-ios-gear" ui-sref="app.offers">
    <ion-nav-view name="tab-offers"></ion-nav-view>
  </ion-tab>

</ion-tabs>

States

$stateProvider.state('app', {
            abstract: true,
            templateUrl: 'main.html',
            controller: function(){}
        });

        $stateProvider
            .state('app.search', {
                url: '/search',
                views: {
                    'tab-home': {
                        templateUrl: 'search.html',
                        controller: function($scope, $state){
                      $scope.current = $state.current;
                      $scope.$on('$stateChangeSuccess', function(event, toState){
                        $scope.current = toState;
                      });
                    }
                    },
                    'tab-offers': {
                        templateUrl: 'search.html',
                        controller: function($scope, $state){
                      $scope.current = $state.current;
                      $scope.$on('$stateChangeSuccess', function(event, toState){
                        $scope.current = toState;
                      });
                    }
                    }
                }
            });

            $stateProvider
            .state('app.offers', {
                url: '/promos',
                views: {
                    'tab-offers': {
                        templateUrl: 'offers.html',
                        controller: function($scope, $state){
                          $scope.current = $state.current;
                          $scope.$on('$stateChangeSuccess', function(event, toState){
                            $scope.current = toState;
                          });
                        }
                    }
                }
            });

            $stateProvider
            .state('app.home', {
                url: '/home',
                views: {
                    'tab-home': {
                        templateUrl: 'home.html',
                        controller: function($scope, $state){
                          $scope.current = $state.current;
                          $scope.$on('$stateChangeSuccess', function(event, toState){
                            $scope.current = toState;
                          });
                        }
                    }
                }
            });

My goal is:

  • When clicking search input and the current tab is home, then open search in the home tab.
  • When clicking search input and the current tab is offers, then open search in the offers tab.

How can I accomplish this?