Assign Markers to Polygons in Leaflet

I want to visualize polygons in Leaflet. I do this via L.geoJson, no problem here.

But each polygon shall has it’s own set of Markers, which should be dispayed, when the polygon is clicked and hidden, when a place outside of the polygon is shown.
Example: Marker 1, with lat1,lon1,description1 and Marker 2 lat2,lon2,description2 belong to Polygon A. Marker 3 and Marker 4 belong to Polygon B.

The default view is the map with the two polygons. No Markers. When I click on Polygon A, Marker 1 and Marker 2 should be displayed. When I click on Marker 1, description1 should be shown in a bubble or something, that comes out of Marker 1.
When I click on Polygon B, Marker 1 and Marker 2 should disappear and Marker 3 and Marker 4 should appear.

When I click somewhere on the map outside of the polygons, all Markers should disappear.

I created a featureGroup for the Markers and I can call clearLayers() to hide all Markers. But how do I add/create the markers so that each Marker is assigned to a polygon?

I can also add the Markers’ information (lat, lon, text to display when clicked) as Features of the Polygon in geojson but then?

This is my code so far:

var map = L.map('map').setView([51.505, -0.09], 13);
var markerGroup = L.featureGroup().addTo(map);
var polygonGroup = L.featureGroup().addTo(map);

// clear all Markers when a place outside of a Polygon is clicked.
map.on('click', function(e) {
  markerGroup.clearLayers();
});

// Create the Markers of the clicked polygon
polygonGroup.on('click', function(e) {
  // this is needed, so that the onClick listener of map does not fire.
  L.DomEvent.stopPropagation(e);
  // Add Markers based on "properties" of a "feature" inside a "FeatureCollection" in a GeoJson File.
});

L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  maxZoom: 19,
  attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
}).addTo(map);

var geojson = L.geoJson(segments).addTo(polygonGroup);

And this is the content of my geojson file:

var segments = {"type":"FeatureCollection","features":[{"type":"Feature","id":"30818214, 30437276.0","properties":{
"type":"Street",
"markers":[[[13.271,52.451],"text to display on this marker"],[[13.46,52.45],"text to display on this other marker"]]
},
"geometry":{"type":"Polygon","coordinates":[[[13.31650670833504,52.6062861338089],[13.316301432085778,52.60624094293158],[13.316165411632992,52.606064409617225],[13.316274301853358,52.60588107437412],[13.316564314460374,52.60579833204233],[13.316865565538109,52.60586465139],[13.31688028977927,52.60588376076443],[13.317085565006439,52.60592895087393],[13.317221588723905,52.60610548312916],[13.31711270191529,52.60628881921736],[13.316822687123965,52.60637156288567],[13.31652143261743,52.6063052434477],[13.31650670833504,52.6062861338089]
]]}},
{"type":"Feature","id":"30818215, 30437277.0","properties":{
"type":"House",
"markers":[[[13.271,52.45159],"text to display on this marker"],[[13.46,52.45],"text to display on this other marker"]]
},
"geometry":{"type":"Polygon","coordinates":[[[13.31650670833504,52.6062861338089],[13.316301432085778,52.60624094293158],[13.316165411632992,52.606064409617225],[13.316274301853358,52.60588107437412],[13.316564314460374,52.60579833204233],[13.316865565538109,52.60586465139],[13.31688028977927,52.60588376076443],[13.317085565006439,52.60592895087393],[13.317221588723905,52.60610548312916],[13.31711270191529,52.60628881921736],[13.316822687123965,52.60637156288567],[13.31652143261743,52.6063052434477],[13.31650670833504,52.6062861338089]
]]}}]};

polygonGroup.on('click', function(e) {
  var markers = e.layer.feature.properties.markers;
  for (var i = 0; i < markers.length; i++) {
    L.marker([markers[i][0][1], markers[i][0][0]]).bindPopup(markers[i][1]).addTo(markerGroup);
  }
  L.DomEvent.stopPropagation(e);
});