title: AngularJS: How to block execution until function returns?
body: <p>I'm trying to display a google map on click with angular JS. But my function seems to be toggling the visibility based on a function call (via ng-show). This means that my trigger of the 'resize' event executes before the map div is actually visible so it doesn't work correctly.</p>
  
  <pre><code>$scope.mapVisible = false;
  $scope.toggleMap = function() {
      $scope.myMap.panTo($scope.myMarkers[0].getPosition());
      $scope.mapVisible = !$scope.mapVisible;
      // this executes too soon. How to block until the div is really visible?
      google.maps.event.trigger($scope.myMap, 'resize');
  }
  
  &lt;div ng-show="mapVisible"&gt;
     &lt;!-- map here --&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>So how can I block triggering the 'resize' event on my map until the div is truly visible?</p>