locationData = [

  {
    "dId": 28046,
    "lat": 33.8627681,
    "long": -117.8870831,
    "loc": "Fullerton  CA",
    "color": "red"
  },
  {
    "dId": 25535,
    "lat": 31.5649775,
    "long": -110.2591639,
    "loc": "Sierra Vista  AZ",
    "color": "yellow"
  },
  {
    "dId": 31222,
    "lat": 33.4308114,
    "long": -70.7828727,
    "loc": "Pudahuel  Metropolitana",
    "color": "green"
  },
  {
    "dId": 23280,
    "lat": 36.1676717,
    "long": -94.1298177,
    "loc": "Springdale  AR",
    "color": "red"
  },
].map(function(place) {
  place.id = place.dId;
  return place;
});

this.mapChart = am4core.create("productsMap", am4maps.MapChart);
this.mapChart.geodata = am4geodata_worldLow;
this.mapChart.projection = new am4maps.projections.Miller();
this.polygonSeries = this.mapChart.series.push(new am4maps.MapPolygonSeries());
this.polygonSeries.exclude = ["AQ"];
this.polygonSeries.useGeodata = true;
this.polygonSeries.calculateVisualCenter = true;

let imageSeries = this.mapChart.series.push(new am4maps.MapImageSeries());

var place = imageSeries.mapImages.template;
place.nonScaling = true;
place.propertyFields.latitude = "lat";
place.propertyFields.longitude = "long";

imageSeries.data = locationData;
var circle = place.createChild(am4core.Circle);
circle.propertyFields.fill = "color";
/// code below made circles visible and used value in {loc} / location name as tooltiptext
circle.width = 20;
circle.height = 20;
circle.nonScaling = false;
circle.tooltipText = "{loc}";
circle.horizontalCenter = "middle";
circle.verticalCenter = "bottom";

var circle2 = imageSeries.mapImages.template.createChild(am4core.Circle);
circle2.radius = 3;
circle2.propertyFields.fill = "color";


circle2.events.on("inited", function(event){
  animateBullet(event.target);
})


function animateBullet(circle) {
    var animation = circle.animate([{ property: "scale", from: 1, to: 5 }, 
 
   {property: "opacity", from: 1, to: 0 }], 1000, am4core.ease.circleOut);
    animation.events.on("animationended", function(event){
      animateBullet(event.target.object);
    })
}

imageSeries.heatRules.push({
  "target": circle,
  "property": "radius",
  "min": 3,
  "max": 10,
  "dataField": "value",
});

//just initializing the ui (you have already done this in angular)
var ddlPlaceChooser = document.getElementById("ddlPlaceChooser");

locationData.map(function(location) {
    var option = document.createElement("option");
    option.value = location.id;
    option.innerText = location.loc;
    return option;
  })
  .forEach(function(option) {
    ddlPlaceChooser.appendChild(option)
  })

function onCountryChange(event) {

  //however you retrieve the selected id
  var placeId = ddlPlaceChooser.selectedOptions[0].value;
  //retrieve map object
  var mapObject = imageSeries.getImageById(placeId);
  //zoom to map object
  mapChart.zoomToMapObject(mapObject, 17, true);
  //optionally open popup with message of choice
  mapObject.openModal("You choose me!")
  //mapObject.openPopup("You choose me!")



}

ddlPlaceChooser.addEventListener('change', onCountryChange)

<script src="https://www.amcharts.com/lib/4/core.js"></script>
<script src="https://www.amcharts.com/lib/4/maps.js"></script>
<script src="https://www.amcharts.com/lib/4/geodata/worldLow.js"></script>
<script src="https://cdn.amcharts.com/lib/4/themes/animated.js"></script>
<div>
  <label for="placeChooser">Choose Place</label>
  <select id="ddlPlaceChooser" name="placeChooser"></select>
</div>
<hr />
<div id="productsMap"></div>