Angular UI Map Not Updating for Scope Changes - angularjs

Question

I am trying to update the Angular ui-map when the scope changes. I have added a $watch and I can see the scope change in console but the map is not updating with the change in latitude and longitude. This is what I have:
$scope.mapOptions = {
zoom: 4,
center: new google.maps.LatLng(-25.363882,131.044922),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var updateCenter = function() {
$scope.mapOptions = {
zoom: 11,
center: new google.maps.LatLng($scope.fromLat, $scope.fromLng),
};
console.log($scope.mapOptions);
}
$scope.$watch('fromLat', updateCenter);
$scope.$watch('fromLng', updateCenter);
Where the $scope.fromLat and $scope.fromLng are the scope changes that I am watching. When I log these scopes in console I can see the scopes updated. But the map is still on the initial state.

Answer 1

Okay, this is what I did to resolve this issue. I did 2 changes:
1) Used setCentre() in Controller:
In the updateCenter() method, instead of updating the $scope.mapOptions, I used setCenter() to directly change the map center.
var updateCenter = function() {
$scope.myMap.setCenter(new google.maps.LatLng($scope.fromLat, $scope.fromLng));
}
Here, myMap is the scope added to ui-map like this:
div ui-map="myMap" ui-options="mapOptions" class="google-map"></div>
2) ng-change in View or $watch:
Secondly, I added a $watch for updating the map instantly. There are 2 ways:
I can add ng-change attribute to the input scope that calls the above function when the latitude and longitudes scopes are changed. This way the map change is in effect immediately.
<input id="fromLat" type="text" ng-model="fromLat" ng-change="updateMap()" name="fromLat" />
Or add a $watch in controller:
$scope.$watch('fromLat', updateCenter);