title: Angular Google Map on multiple Tabs with same Controller and same Template
body: <p>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.</p>
  
  <pre><code>.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'
      }
    }
  })
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="map"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>Controller:</p>
  
  <pre><code>$scope.map = new google.maps.Map(document.getElementById('map'), mapOptions);
  </code></pre>
  
  <p>URL on the first Tab:
  <strong>/tab1/map</strong></p>
  
  <p>URL on the second Tab:
  <strong>/tab2/map</strong></p>
  
  <p>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.<br><br>
  Does anybody knwo how to deal with the "same" page on multiple tabs? Thanks in advance.</p>