Angular UI-Google-Map opening infoWindow

I'm using Angular-Google-maps to create a map with a markers displayed on it. I am able to click on a marker and show the associated infoWindow. However I wish to be able to click on a list of links to open the info window rather than click on the marker itself, something similar to this example here:

I have asked this question previously and it was suggested that in my <ui-gmap-windows> tag that I needed to add a models attribute, but when I look at Angular-Google-Maps documentation I do not see any examples of how to do that.

My html looks like this:

<div id="googleMap" class="col-xs-12 col-md-8">
  <ui-gmap-google-map center='map.center' zoom='map.zoom'>
    <ui-gmap-markers models="markers"  coords="'coords'" icon="'icon'" click="onClick()" events="markersEvents" options="'options'">
      <ui-gmap-windows  show="show" closeClick="closeClick()" class="mapWindow"  >
        <div ng-non-bindable>{{id}} {{icon}} id="infoWindow"
          <h1>{{name}}</h1>
          <a href="#/detail/{{id}}" class="thumb">Show Detail</a>
        </div>
      </ui-gmap-windows>
    </ui-gmap-markers>
  </ui-gmap-google-map>
</div>
<div id="detail" class="col-xs-12 col-md-4">
  <ul>
    <li data-ng-repeat="x in markers">
      <a ng-click="onClick()">{{x.name}}</a> <!-- Click on this linnk and find associated infoWindow to open -->
    </li>
  </ul>
</div>

And in my javascript I am creating the Map and markers as follows:

    $scope.markers = [];

    $http.get("json/locations.json").success(function(response) {
      $scope.locations = response.dogFriendly;
      jQuery.each($scope.locations, function(i, val){
        console.log(i);
        console.log(val.location);
        var marker = {};
        marker.name = val.name;
        marker.id = i;
        marker.coords = val.location;
        marker.icon = '/images/pawIcon.png';
        marker.onClick = function(){
          $scope.windowOptions.visible = !$scope.windowOptions.visible;
        }.bind(this);
        $scope.markers.push(marker);

      });
    });

    $scope.windowOptions = {
      visible: false
    };

    $scope.onClick = function() {
      $scope.windowOptions.visible = !$scope.windowOptions.visible;
    };

    $scope.closeClick = function() {
      $scope.windowOptions.visible = false;
    };

    $scope.title = "Window Title!";

    uiGmapGoogleMapApi.then(function(maps){
      $scope.googleMap = {};
      $scope.map = { center: { latitude: 53.347117, longitude: -6.280285 }, zoom: 14 };

    });

    uiGmapIsReady.promise()
      .then(function(instances){
        var maps = instances[0].map;
        $scope.myOnceOnlyFunction(maps);
      });

    $scope.myOnceOnlyFunction = function (maps) {
      var center = maps.getCenter();
      var lat = center.lat();
      var lng = center.lng();
    };

    $scope.showMarker = function(obj, $event){
      var markerId = this.x.id;
      for(var i = 0; i < $scope.markers.length; i++){
        if(markerId == $scope.markers[i].id){

          // open this markers infoWindow
          $scope.markers[i].onClick = function(){
               $scope.windowOptions.visible = !$scope.windowOptions.visible;
          }
        }
      }
    }

  });

I'm trying to figure out how I can find the marker.id from a link click and then trigger the WindowOptions for that marker to open?

Any help would be appreciated.

via Chebli Mohamed