Display a simple path between two points using ngmap in angularjs

Question

I have followed the Demo and the github documentation of ngmap but still can't load a simple map with two points plotted and connected in it using the "directions" directive. (Weirdly though I can plot simple unconnected points in my map using the "marker" keyword)

I already included an apikey in my index.html file using the following format:

<script src="http://maps.google.com/maps/api/js?key=APIKEY"></script>

and added ngMap as a dependency in my modules.

and tested my codes in plunker

I'm sure I'm just missing out something very obvious in the tutorials. Appreciate all the help and thanks in advance.

EDIT:

template code snippet:

<ng-map zoom-to-include-markers="true" >
         <directions
          draggable="true"
          panel=""
          travel-mode=""
          origin="14.600631955983781,120.99075458943844"
          destination="14.600839603150039,120.98217152059078">
        </directions>
        </ng-map>

Answer 1

Solved by adding a value to the waypoint property of directions.

<directions
          draggable="true"
          panel=""
          travel-mode=""
          waypoint = /* insert locations here in between origin and destination */
          origin="14.600631955983781,120.99075458943844"
          destination="14.600839603150039,120.98217152059078">
</directions>

Although I still haven't found a way for this to work in just routing two locations in a map.

Answer 2

The way I used the waypoint for 2 location is as follow:

<directions
  draggable="true"
  panel=""
  travel-mode=""
  waypoint = {{ waypoints }}
  origin="14.600631955983781,120.99075458943844"
  destination="14.600839603150039,120.98217152059078">
</directions>

$scope.waypoints = [{
  location: 'lat,lon'
}, {
  location: 'lat,lon'
}]

For waypoints, the location key can either be 'lat,lon' or an address in text. If its an address in text, google maps will infer the lat lon themselves