NgMap AngularJS setZoom()

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);
   }

}

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.