Closing ionic popover

I have a popover template like:

<ion-popover-view class="fit">
  <ion-content scroll="false">
    <ion-list>
      <ion-item ng-click="popoverGotoView(foo, {id: 1})">
        Option 1
      </ion-item>
      <ion-item ng-click="popoverGotoView(foo, {id: 2})">
        Option 2
      </ion-item>
    </ion-list>
  </ion-content>
</ion-popover-view>

And in controller I have

$scope.popoverGotoView = function(path, arg) {
    $scope.popover.hide();
    $state.go(path, args);
}

Where $scope.popover is get based on ionic docs. Popover shows, on click it goes to another view but it doesn't hide. I tried to debug and it goes to hide method, but inside, ionic is changing popup classes without effect in DOM. Clicking outside popover it hides properly.

What I'm doing wrong?

Solution

Here is a code snippet. Where is the problem?

angular.module('ionicApp', ['ionic'])

.config(function($stateProvider, $urlRouterProvider) {

  $stateProvider
    .state('tabs', {
      url: "/tab",
      abstract: true,
      templateUrl: "templates/tabs.html"
    })
    .state('tabs.home', {
      url: "/home",
      views: {
        'home-tab': {
          templateUrl: "templates/home.html",
          controller: 'HomeCtrl'
        }
      }
    })
    .state('tabs.map', {
      url: "/map",
      views: {
        'map-tab': {
          templateUrl: "templates/map.html",
          controller: 'MapCtrl'
        }
      }
    });

   $urlRouterProvider.otherwise("/tab/home");

})

.run(function($rootScope) {

})

.controller('HomeCtrl', function($scope, $state, $ionicPopover) {
  console.log('HomeCtrl');
    $ionicPopover.fromTemplateUrl('templates/popover.html', {
      scope: $scope,
    }).then(function(popover) {
      $scope.popover = popover;
    });
  
  $scope.popoverGotoView = function(path, arg) {
    $scope.popover.hide();
    $state.go(path, arg);
  }
  
})

.controller('MapCtrl', function($scope, $state, $ionicPopover) {
  console.log('MapCtrl');
    $ionicPopover.fromTemplateUrl('templates/popover.html', {
      scope: $scope,
    }).then(function(popover) {
      $scope.popover = popover;
    });
  
  $scope.popoverGotoView = function(path, arg) {
    $scope.popover.hide();
    $state.go(path, arg);
  }

});

<html ng-app="ionicApp">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
  <title>Tabs Example</title>
  <link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
  <script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
</head>

<body>

  <ion-nav-bar class="bar-positive">
    <ion-nav-back-button>
    </ion-nav-back-button>
  </ion-nav-bar>

  <ion-nav-view></ion-nav-view>

  <script id="templates/tabs.html" type="text/ng-template">
    <ion-tabs class="tabs-icon-top tabs-positive">

      <ion-tab title="Home" icon="ion-home" href="#/tab/home">
        <ion-nav-view name="home-tab"></ion-nav-view>
      </ion-tab>

      <ion-tab title="Map" icon="ion-ios-world" ui-sref="tabs.map">
        <ion-nav-view name="map-tab"></ion-nav-view>
      </ion-tab>

    </ion-tabs>
  </script>

  <script id="templates/home.html" type="text/ng-template">
    <ion-view view-title="Home">
      <ion-nav-buttons side="right">
        <button class="button button-icon ion-more" ng-click="popover.show($event)"></button>
      </ion-nav-buttons>
      <ion-content class="padding">
        Home view
        <p>
          <a class="button icon icon-right ion-chevron-right" href="#/tab/map">Go to Map</a>
        </p>
      </ion-content>
    </ion-view>
  </script>

  <script id="templates/map.html" type="text/ng-template">
    <ion-view title="">
      <ion-nav-buttons side="left">
        <input id="places" class="controls" type="text" autocomplete placeholder="Enter a location" />
      </ion-nav-buttons>
      <ion-nav-buttons side="right">
        <button class="button button-icon ion-more" ng-click="popover.show($event)"></button>
      </ion-nav-buttons>

      <ion-content>
        Map view
      </ion-content>

    </ion-view>
  </script>

    <script id="templates/popover.html" type="text/ng-template">
    <ion-popover-view class="fit">
      <ion-content scroll="false">
        <ion-list>
          <ion-item ng-click="popoverGotoView('tabs.map', {id: 1})">
            Option 1 Map
          </ion-item>
          <ion-item ng-click="popoverGotoView('tabs.home', {id: 2})">
            Option 2 Home
          </ion-item>
        </ion-list>
      </ion-content>
    </ion-popover-view>
  </script>
  
</body>

</html>