angular js: Unable to add marker in google map

Question

I'm trying to add a marker in google map but unfortunately, it's not getting added.

There is only one marker in a map.

Here's my HTML:

<div ng-app="myApp" ng-controller="gMap">
  <ui-gmap-google-map 
    center='map.center' 
    zoom='map.zoom' aria-label="Google map">

    <ui-gmap-marker ng-repeat="marker in markers"
      coords="marker.coords" options="marker.options" events="marker.events" idkey="marker.id">
      <ui-gmap-window>
        <div>{{marker.window.title}}</div>
      </ui-gmap-window>
    </ui-gmap-marker>

  </ui-gmap-google-map>
</div>

My Angular code looks like this:

var myApp = angular.module('myApp', ['uiGmapgoogle-maps']);

myApp.controller("gMap",function($scope){
  $scope.map = { 
    center: { latitude: 39.8282, longitude: -98.5795 }, 
    zoom: 4 
  };

  $scope.markers.id = "1";
  $scope.markers.coords.latitude = "40.7903";
  $scope.markers.coords.longitude = "-73.9597";
  $scope.markers.window.title = "Manhattan New York, NY";

});

CODEPEN

Answer 1

Changed the code a little bit and got the result.

var myApp = angular.module('myApp', ['uiGmapgoogle-maps']);

myApp.controller("gMap",function($scope){
  $scope.map = { 
    center: { latitude: 39.8282, longitude: -98.5795 }, 
    zoom: 4 
  };

  $scope.marker = { 
    coords: { latitude: 39.8282, longitude: -98.5795 }, 
    id: 4 ,
    window: { title: "Manhattan New York, NY" }
  };


});

AND HTML became:

<div ng-app="myApp" ng-controller="gMap">
  <ui-gmap-google-map 
    center='map.center' 
    zoom='map.zoom' aria-label="Google map">

    <ui-gmap-marker 
      coords="marker.coords" options="marker.options" events="marker.events" idkey="marker.id">
      <ui-gmap-window>
        <div>{{marker.window.title}}</div>
      </ui-gmap-window>
    </ui-gmap-marker>

  </ui-gmap-google-map>
</div>

CODEPEN