angular ui-map, set map to fit markers bounds

[jaitor1]

I am using ui-map to create a map. I have several points now and I want the map to automatically set the center and the zoom to display all the markers at the beginning.

I found a possible solution here so I added to my project.

The problem is that every time I move around the map, the map goes to the initial zoom and extent.

Is it because angular is continually evaluating the $scope.mapOptions and centering the map?

Controller

$scope.myMarkers = [new google.maps.LatLng (52.537,-2.061), 
                     new google.maps.LatLng (52.564,-2.017)]; 

var latlngbounds = new google.maps.LatLngBounds();

$scope.myMarkers.forEach(function(marker){
               latlngbounds.extend(marker.position);
            });

   $scope.mapOptions = {
        zoom: 17,
        center: latlngbounds.getCenter(),
        mapTypeId: google.maps.MapTypeId.SATELLITE
    };

HTML

             <div id="map_canvas" ui-map="myMap" ui-options="mapOptions" style="height:800px"></div>

            <!--In addition to creating the markers on the map, div elements with existing google.maps.Marker object should be created to hook up with events -->
            <div ng-repeat="marker in myMarkers" ui-map-marker="myMarkers[$index]">
            </div>

How can I solve this?