angular-google-map: unable to get marker on the map

I am currently working for ionic app, and need to show a map of a place. I am using angular-google-map, and the map did show in the screen. The problem is I couldn't get the marker on the map! I am really running out of idea on why the marker did not show up.

My html code:

<div id="map_canvas" ng-controller="mapCtrl">
  <ui-gmap-google-map center="map.center" zoom="map.zoom">
    <ui-gmap-marker coords="marker.coords" idkey="'1'"></ui-gmap-marker>
  </ui-gmap-google-map>
</div>

My controllers.js code:

.controller('mapCtrl', function($scope) {
  $scope.map = { center: { latitude: 3.133098, longitude: 101.6816 }, zoom: 16};
  $scope.marker = {coords: { latitude: 3.133098, longitude: 101.6816 } };
});

Solution

I solved it by first completely re-install angular-google-maps, and adding the following three lines:

<script src="lib/lodash/lodash.js"></script> <script src="lib/angular-simple-logger/dist/angular-simple-logger.js"></script> <script src="lib/angular-google-maps/dist/angular-google-maps.js"></script>

I've got everything mix-up. Decided to start clean, and paid close attention on error console. Now both marker and map work just fine!