With angular-ui google maps how do you re-load new map data or center? - angular-ui

Question

I haven't been able to find a tutorials yet with angular google map that shows how to re-load either map data or re-center the map with new data.
My controller:
vm.territories = []; //this gets loaded with the polylines
vm.center = {
latitude: 40.7450,
longitude: -99.3965
}
Html:
<ui-gmap-google-map center="vm.center" zoom="vm.zoomLevel">
<ui-gmap-polygon ng-repeat="ct in vm.territories" path="ct.territoryData" stroke="ct.mapStroke" visible="vm.polygon.visible"
geodesic="vm.polygon.geodesic" fill="ct.mapFill" editable="vm.polygon.editable">
</ui-gmap-polygon>
</ui-gmap-google-map>
So question is, if I change the vm.center values or want to add/remove/change vm.territories after the map has already loaded with that data, how do I re-load it after the fact? I was hoping I could bind the data to the ui and change it on the fly but not sure that's possible.

Answer 1

as you can see in this example, you can simply bind your center values to input fields, or use it in other controller functions.
if you add a function to your controller like this:
$scope.setCenter = function(lat, lng)
{
$scope.map.center = {latitude: lat, longitude: lng };
}
and call this function from a button like:
<button ng-click="setCenter(20, 30)">Set Center</button>
you'll notice how the map is centered at the new values.
if you extend the example a little bit more, you'll see, that the same applies for the polygon.
$scope.addPoint = function(lat, lng){
$scope.polygons[0].path.push({latitude: lat, longitude: lng});
}
and the button:
<button ng-click="addPoint(20, 30)">AddPoint</button>