Add Marker in Angular-Google-Maps

I have created the fiddle. Here is the HTML.

<div ng-app="main" ng-controller="mainCtrl">    <ui-gmap-google-map center="map.center" zoom="map.zoom" draggable="true" events="map.events">        <ui-gmap-marker ng-repeat="m in map.markers" coords="m.coords" icon="m.icon" idkey="m.id"></ui-gmap-marker>    </ui-gmap-google-map></div>

The controller is like this.

angular.module('main', ['uiGmapgoogle-maps']).controller('mainCtrl', function ($scope) {    angular.extend($scope, {        map: {            center: {                latitude: 42.3349940452867,                longitude:-71.0353168884369            },            zoom: 11,            markers: [],            events: {            click: function (map, eventName, originalEventArgs) {                var e = originalEventArgs[0];                var lat = e.latLng.lat(),lon = e.latLng.lng();                var marker = {                    id: Date.now(),                    coords: {                        latitude: lat,                        longitude: lon                    }                };                $scope.map.markers.push(marker);                console.log($scope.map.markers);                $scope.$apply();            }        }        }    });});

It seems you need give $scope.map.marker.id one init value. Otherwise, below error would occur.

gMarker.key undefined and it is REQUIRED!!