ui-gmap (angular-google-maps) markers with sep window InfoWindow with Templates

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <div ng-app="app" ng-controller="locatorController" class="location-finder">
    <ui-gmap-google-map center="map.center" zoom="map.zoom" control="map.control">

      <!-- Map Pins -->
      <ui-gmap-markers models="map.markers" idKey="'id'" coords="'self'" events="map.markersEvents">
      </ui-gmap-markers>

      <!-- InfoWindows -->
<!-- this works, but infowindow is not attached to marker -->
      <ui-gmap-window 
      show="map.window.show" 
      coords="map.window.model" 
      templateUrl="'infowindow.tpl'" 
      templateParameter="map.window.model" 
      options="map.window.options"
      ng-cloak>
      </ui-gmap-window>
<!-- try this instead of the above and the template does not load -->
<!-- <ui-gmap-window show="map.window.show" coords="map.window.model" templateUrl="'infowindow.tpl'" ng-cloak></ui-gmap-window>-->


    </ui-gmap-google-map>

    <ul class="location-list">
      <li ng-repeat="location in map.markers" ng-class="{selected: location == map.window.model}" ng-click="map.window.model = location">
        Location #{{location.id}} is at: ({{location.latitude}}, {{location.longitude}})
      </li>
    </ul>
    <br>
    <span>window:{{map.window}}</span>
  </div>


  <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular.min.js" charset="utf-8"></script>
  <script src="http://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.5.0/lodash.js" charset="utf-8"></script>
  <script src="http://cdnjs.cloudflare.com/ajax/libs/angular-google-maps/2.1.0-X.5/angular-google-maps.js" charset="utf-8"></script>
  <script src="script.js"></script>

</body>

</html>

'use strict';
angular.module('app', ['uiGmapgoogle-maps'])
  .controller('locatorController', function($scope, $timeout, uiGmapGoogleMapApi) {
    $scope.map = {
      center: {
        latitude: 39,
        longitude: -98
      },
      control: {},
      zoom: 8,
      window: {
        model: {},
        show: false,
        options:{
          pixelOffset: {width:-1,height:-20}
        }
      },
      markers: [{
        "id": "1",
        "latitude": "39.05",
        "longitude": "-98.55"
      }, {
        "id": "2",
        "latitude": "39.15",
        "longitude": "-98.45"
      }, {
        "id": "3",
        "latitude": "39.25",
        "longitude": "-97.95"
      }, ],
      markersEvents: {
        click: function(marker, eventName, model, args) {
          $scope.map.window.model = model;
          $scope.map.window.show = true;  
          
        }
      }
    };


  })
  .controller('templateController',function(){});

.location-finder .angular-google-map,
.location-finder .angular-google-map-container {
	height: 30em;
}

.selected {
  background: #ddd;
}

<div ng-controller="templateController">
Template ID: {{parameter.id}}
</div>