Marker click event not firing for ui-gmap-marker in Map Controller

I found the solution after digging around a lot. The HTML I am using is below. I am using "ui-gmap-markers" (with "s") instead of "ui-gmap-marker". Also, I had to encapsulate google map with data-tap-disabled = "true" to get it to work on phone.

<ons-page class="map" ng-controller="MapController2" sliding-menu-ignore="true">

    <ons-toolbar>
        <div class="left"><ons-back-button>Back</ons-back-button></div>
        <div class="center page-title">Map MapController</div>
    </ons-toolbar>

    <ui-gmap-google-map center="map.center" refresh="true" zoom="map.zoom" draggable="true" data-tap-disabled="true">

        <ui-gmap-window show="map.window.show" coords="map.window.model" options="map.window.options" closeClick="map.window.closeClick()">
            <div style="color: black">
                {{map.window.title}}
            </div>
        </ui-gmap-window>
        <ui-gmap-markers idkey="marker.id" models="map.markers" coords="'self'" doCluster="false" fit="'true'" icon="'icon'" events="map.markersEvents " options="'options'"></ui-gmap-markers>

    </ui-gmap-google-map>

</ons-page>

      

        
        
        
      

    

And then the controller looks like this:

// Map Controller
    app.controller('MapController2', function($scope, $rootScope, $http) {
        var data = {};

        data.map = {
            zoom: 12,
            center: {
                latitude: 27.949,
                longitude: -81.958
            },
            markers: [
                {
                    id: 1,
                    icon: 'img/blue_marker.png',
                    latitude: 27.949,
                    longitude: -81.999,
                    title: 'This is where you are'
                },
                {
                    id: 2,
                    latitude: 27.949,
                    longitude: -81.958,
                    title: 'Job Site'
                },
                {
                    id: 3,
                    icon: 'img/plane.png',
                    latitude: 27.949,
                    longitude: -81.94,
                    title: 'Airport'
                }],
            markersEvents: {
                click: function(marker, eventName, model, arguments) {
                    console.log('Marker was clicked (' + marker + ', ' + eventName);//+', '+mydump(model, 0)+', '+mydump(arguments)+')');
                    $scope.map.window.model = model;
                    $scope.map.window.model = model;
                    $scope.map.window.title = model.title;
                    $scope.map.window.show = true;
                }
            },
            window: {
                marker: {},
                show: false,
                closeClick: function() {
                    this.show = false;
                },
                options: {}, // define when map is ready
                title: ''
            }
        };

        //$scope.window = false;

        $scope.onMarkerClicked = function (m) {
            //this.windowOptions = !this.windowOptions;
            console.log('Marker was clicked');
            console.log(m);
        };

        $scope.closeClick = function () {
            this.window = false;
        };

        $scope.map = data.map;

    });