Angular Google Map on multiple Tabs with same Controller and same Template

I'm working with IONIC and AngularJS and have a Google Map included. I have a template and a Controller for this map and I will use the map on two Tabs.

.state('tab.map1', {
  url: '/tab1/map',
  views: {
    'map1-tab': {
      templateUrl: 'templates/map.html',
      controller: 'MapController'
    }
  }
})
.state('tab.map2', {
  url: '/tab2/map',
  views: {
    'map2-tab': {
      templateUrl: 'templates/map.html',
      controller: 'MapController'
    }
  }
})

HTML:

<div id="map"></div>

Controller:

$scope.map = new google.maps.Map(document.getElementById('map'), mapOptions);

URL on the first Tab: /tab1/map

URL on the second Tab: /tab2/map

Now when I call one of the URL's everything is fine and I can see my map. But when I change the tab I can't see the map anymore. the div seems to be empty. After page reload, the map is visible.

Does anybody knwo how to deal with the "same" page on multiple tabs? Thanks in advance.

If someone else has the same issue, here my solution:

The problem was, that I used the same HTML for both tabs, the div's shouldn't have the same id.

.state('tab.map1', {
  url: '/tab1/map',
  views: {
    'map1-tab': {
      templateUrl: 'templates/map1.html',
      controller: 'MapController'
    }
  }
})
.state('tab.map2', {
  url: '/tab2/map',
  views: {
    'map2-tab': {
      templateUrl: 'templates/map2.html',
      controller: 'MapController'
    }
  }
})

HTML for first Tab:

<div id="map1"></div>

HTML for second Tab:

<div id="map2"></div>

And in my controller logic

if ($location.path() == 'tab1\map'){
  $scope.map = new google.maps.Map(document.getElementById('map1'), mapOptions);
}else{
  $scope.map = new google.maps.Map(document.getElementById('map2'), mapOptions);
}

That is working for me, map is always visible when changing between tabs.