ionic for multi marker google map opens last markup

I am using ionic to display benefits data on Google map. It works fine except on click of any marker, it opens the last markup content. Follownig is my google map js code

.controller('BenefitsMapCtrl', function ($scope, LocationBenefits, Utilities, $ionicLoading, $compile) {
    $scope.init = function () {
        var userId = Utilities.getUserId();
        LocationBenefits.getLocationBenefits(userId, function (userBenefits) {
            console.log("Got location benefits data for Google mp for user id "+userId);
            $scope.userBenefits = userBenefits;
            var centerLatlng;
            if (typeof $scope.userBenefits !== "undefined" && $scope.userBenefits.length > 0) {
                var firstBenefitLocation = $scope.userBenefits[0];
                centerLatlng = new google.maps.LatLng(firstBenefitLocation.location.lat, firstBenefitLocation.location.lng);
            }

            var mapOptions = {
                center: centerLatlng,
                zoom: 16,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            var map = new google.maps.Map(document.getElementById("map"), mapOptions);
            $scope.markers=[];
            //Loop in each benefits and place on Google map
            if (typeof $scope.userBenefits !== "undefined" && $scope.userBenefits.length > 0) {
                for (var i = 0; i < $scope.userBenefits.length; i++) {
                    var benefit = $scope.userBenefits[i];
                    //Marker + infowindow + angularjs compiled ng-click
                    var contentString = "<div><div><img class='shop-icon' src='" + benefit.shopicon + "' alt='" + benefit.shopName + "'/><span class='item-text-wrap'>" + benefit.shopName + "</span></div><div class='shop-offer'>"+benefit.benefits.short_benefitText+"</div><div class='card'><img class='card-art' src='"+benefit.cardart+"' alt='"+benefit.card+"'/></div></div>";
                    var compiled = $compile(contentString)($scope);
                    var infowindow = new google.maps.InfoWindow({
                        content: compiled[0]
                    });
                    //Get location
                    var locationLatLng = new google.maps.LatLng(benefit.location.lat, benefit.location.lng);
                    var marker = new google.maps.Marker({
                        position: locationLatLng,
                        map: map,
                        title: benefit.shopName
                    });
                    google.maps.event.addListener(marker, 'click', function () {
                        infowindow.open(map, marker);
                    });
                     $scope.markers.push(marker);
                }
            }
            //Finally set the map
            $scope.map = map;
        });

    };

    // google.maps.event.addDomListener(window, 'load', initialize);

    $scope.centerOnMe = function () {
        if (!$scope.map) {
            return;
        }

        $scope.loading = $ionicLoading.show({
            content: 'Getting current location...',
            showBackdrop: false
        });

        navigator.geolocation.getCurrentPosition(function (pos) {
            $scope.map.setCenter(new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude));
            $scope.loading.hide();
        }, function (error) {
            alert('Unable to get location: ' + error.message);
        });
    };

    $scope.clickTest = function () {
        alert('Example of infowindow with ng-click')
    };

});

Issue: On click of any markup on Google map, it always opens the last markup. Please help.