title: angular-google-maps update model
body: <p>How to update the model to load a new dataset of markers? </p>
  
  <pre><code>&lt;ui-gmap-google-map center="map.center" zoom="map.zoom" bounds="map.bounds" refresh="map.refresh"&gt;
  &lt;ui-gmap-markers
      models="dataset"
      coords="'self'"
      icon="'icon'"
      doCluster='10'
      click="onClick"
      &gt;
          &lt;ui-gmap-windows show="show"&gt;
              &lt;div ng-non-bindable&gt;
                  &lt;h3 class="gray3-text fz13 mbottom0"&gt;{{title}}&lt;/h3&gt;
              &lt;/div&gt;
          &lt;/ui-gmap-windows&gt;
  &lt;/ui-gmap-markers&gt;
  </code></pre>
  
  <p></p>
  
  <p>I am changing the dataset from outside the ui-gmap-google-map directive, like so</p>
  
  <pre><code>&lt;p ng-click="changeDataset('allUsers')" class="cursor-pointer"&gt;
  &lt;p ng-click="changeDataset('allQuotations')" class="cursor-pointer"&gt;
  </code></pre>
  
  <p>the function is this: </p>
  
  <pre><code>scope.changeDataset = function(){
      switch (dataset) {
           case 'allResellers':
               scope.dataset = scope.allResellers;
               break;
            case 'allQuotations':
                scope.dataset = scope.allQuotations;
                break;
  
             case 'allUsers':
                scope.dataset = scope.allUsers;
                break;
  
             case 'allMarkers':
                scope.dataset = scope.allMarkers;
                break;
         }
   };
  </code></pre>
  
  <p>my scope.dataset changes but it doesn't update the markers in the map.</p>
  
  <p>PS: modelsbyref="false" doesn't work.</p>
  
  <p>Adding control="markerControl" to ui-gmap-google-map worked, but had to use this workaround:</p>
  
  <pre><code>angular.element(document.getElementsByClassName('angular-google-map')).scope().markerControl.updateModels(newDataset);
  
  
  &lt;ui-gmap-google-map center="map.center" zoom="map.zoom" bounds="map.bounds"&gt;
  &lt;ui-gmap-markers
      models="dataset"
      coords="'self'"
      icon="'icon'"
      doCluster='10'
      click="onClick"
      control="markerControl"
      &gt;
          &lt;ui-gmap-windows show="show"&gt;
              &lt;div ng-non-bindable&gt;
                  &lt;h3 class="gray3-text fz13 mbottom0"&gt;{{title}}&lt;/h3&gt;
              &lt;/div&gt;
          &lt;/ui-gmap-windows&gt;
  &lt;/ui-gmap-markers&gt;
  </code></pre>
  
  <p>                        </p>