NgMap AngularJS setZoom() - angularjs

Question

Is anyone familiar with NgMap directives for using the Google Maps API? I have gotten a map to render with markers on data points, however I want to zoom in when I click on the marker. This isn't working for me. I am just trying to log the passed in location of the marker and I am seeing nothing right now.
I'm pretty new to AngularJS so I am probably missing something with the scope. Thanks!
Here's the map:
<div id='map'>
<map center="{{ $ctrl.map.center.latitude }}, {{ $ctrl.map.center.longitude }}" zoom="{{ $ctrl.map.zoom }}">
<div ng-repeat="location in $ctrl.locations">
<marker position="[{{ location.latitude }}, {{ location.longitude }}]" ng-click="$ctrl.pinClicked(location)"></marker>
</div>
</map>
</div>
And the component:
angular.module('myplaces')
.component('placespage', {
templateUrl: 'places.template.html',
controller: controller
})
function controller(placeService, NgMap) {
const ctrl = this;
ctrl.locations = [];
ctrl.marker = []
ctrl.map = {}
var map;
ctrl.$onInit = function() {
placeService.getPlaces().then(function(response) {
console.log(response.data.rows);
ctrl.locations = response.data.rows;
})
NgMap.getMap().then(function(map) {
console.log(ctrl.map);
})
ctrl.map = {
center:
{
latitude: 34.8394,
longitude: 134.6939
},
zoom:5,
};
}
ctrl.pinClicked = function(loc) {
console.log(loc); //This is getting nothing...
ctrl.map.setZoom(8);
}
}

Answer 1

move ng-repeat to marker directive and use onClick to bind with controller's function.
<marker ng-repeat="location in $ctrl.locations" position="[{{ location.latitude }}, {{ location.longitude }}]" on-click="$ctrl.pinClicked(location)"></marker>
see sample here.