loop infowindow with marker using ng-map - angularjs

Question

so if I loop my markers with info-window, info-window show all info about all markers,no separately.I tried also use filter and filtered loop in info-window but not worked..
And sorry for my english i am not a native speaker..
info-window and marker image how look like my problem
my code here
<div class="googleMaps">
<ng-map id="map" style="height: 224px" zoom="14" center="currentLocation()" ng-init="currentLocation()">
<marker animation="DROP"
position="currentLocation()"
icon="../img/tagGoogle.png" >
</marker>
<marker animation="DROP"
ng-repeat="results in xResult"
value="{{results.name}}"
position="{{results.lat +','+ results.lng}}"
on-click="showInfoWindow(1)">
</marker>
<info-window id="1">
<div ng-non-bindable="">
<div ng-repeat="results in xResult">
<div>
shop id:{{ results.id }} name:{{results.name}}<br>
</div>
</div>
</div>
</info-window>
</ng-map>
</div>

Answer 1

If I understood you properly, you would like to display info window with information that corresponds to the clicked marker. If so, the following example demonstrates how to accomplish it:
angular.module('mapApp', ['ngMap'])
.controller('mapController', function($scope, NgMap) {
NgMap.getMap().then(function(map) {
$scope.map = map;
});
$scope.cities = [
{ id: 1, name: 'Oslo', pos: [59.923043, 10.752839] },
{ id: 2, name: 'Stockholm', pos: [59.339025, 18.065818] },
{ id: 3, name: 'Copenhagen', pos: [55.675507, 12.574227] },
{ id: 4, name: 'Berlin', pos: [52.521248, 13.399038] },
{ id: 5, name: 'Paris', pos: [48.856127, 2.346525] }
];
$scope.showCity = function(event, city) {
$scope.selectedCity = city;
$scope.map.showInfoWindow('myInfoWindow', this);
};
});
<script src="https://maps.google.com/maps/api/js"></script>
<script src="https://code.angularjs.org/1.3.15/angular.js"></script>
<script src="https://rawgit.com/allenhwkim/angularjs-google-maps/master/build/scripts/ng-map.js"></script>
<script src="app.js"></script>
<div ng-app="mapApp" ng-controller="mapController">
<ng-map default-style="true" zoom="5" center="59.339025, 18.065818">
<info-window id="myInfoWindow">
<div ng-non-bindable>
<h4>{{selectedCity.name}}</h4>
</div>
</info-window>
<marker ng-repeat="c in cities"
position="{{c.pos}}" title="{{c.name}}" id="{{c.id}}" on-click="showCity(event, c)">
</marker>
</ng-map>
</div>

Answer 2

Thx for answer...I already fix it too..
So my solution..
<div class="googleMaps">
<div id="map" ng-init="currentLocation()"></div>
</div>
<form id="coffeForm" ng-submit="submitForm()">
<div class="textField" ng-repeat="marker in markers | orderBy : 'title'" ng-class="{ 'selected-class-name': $index == selectedIndex }"
ng-click="itemClicked($index)">
<div flex id="class" class="text-center">
<label flex href="#" class="text-center" ng-click="openInfoWindow($event, marker)">{{marker.title}}
<input flex id="Id" type="radio" name="Id" ng-model="form.Id" value="{{marker.id}}" /></label>
</div>
</div>
<a class="coffGoBtn text-center" href="#/orderCoffe" ng-click="submitForm()">Pokracuj</a>
</form>
$scope.currentLocation = function() {
var options = {
enableHighAccuracy: true
};
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function (pos) {
$scope.position = new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude);
$scope.Lat = pos.coords.latitude;
$scope.Long = pos.coords.longitude;
var postData = $.param({
arr1: JSON.stringify({
latit: $scope.Lat
}),
arr2: JSON.stringify({
longit: $scope.Long
})
});
console.log(postData);
$http({
method: 'POST',
url: 'range.php',
data: postData,
headers: {'Content-Type': 'application/x-www-form-urlencoded'},
dataType: JSON
}).success(function (res) {
$scope.xResult = [];
$scope.xResult = res;
var setPosition = $scope.position;
var mapOptions = {
zoom: 15,
center: $scope.position,
disableDefaultUI:true,
//scrollwheel: false,
//navigationControl: false,
//mapTypeControl: false,
//scaleControl: false,
draggable: false,
mapTypeId: google.maps.MapTypeId.ROADMAP,
icon: ourMarker
};
$scope.map = new google.maps.Map(document.getElementById('map'), mapOptions);
var ourMarker = new google.maps.Marker({
position: setPosition,
map: $scope.map,
title: 'its me',
icon: 'img/tagGoogle.png'
});
ourMarker.setMap($scope.map);
$scope.markers = [];
$scope.logos= [];
$scope.names =[];
var infoWindow = new google.maps.InfoWindow();
var createMarker = function(info){
var marker = new google.maps.Marker({
map: $scope.map,
position: new google.maps.LatLng(info.lat, info.lng),
title: info.name,
logo: info.img,
id: info.id,
icon: "img/Place.png"
});
marker.content = '<div class="infoWindowContent">' + info.name + ", " +"<br>"+ "vzdialenost: " + info.distance * 1000 + "m" +'</div>';
google.maps.event.addListener(marker, 'click', function(){
infoWindow.setContent('<h6>' + marker.title + '</h6>' + marker.content);
infoWindow.open($scope.map, marker);
$log.info(infoWindow);
});
$scope.markers.push(marker);
};
for (var i = 0; i < res.length; i++){
createMarker(res[i]);
}
$scope.openInfoWindow = function(e, selectedMarker){
google.maps.event.trigger(selectedMarker, 'click');
};
}).error(function (error) {
console.log(error);
});
},
function (error) {
alert('Unable to get location: ' + error.message);
}, options);
}
else {
alert("Please reload page or click on the Set Position button or your browser does not support geolocation services.");
}