AngularJS - Windows

angular.module('appMaps', ['uiGmapgoogle-maps'])
    .controller('mainCtrl', function($scope) {
        $scope.map = {center: {latitude: 39.13773735160255, longitude: -86.51972115039825}, zoom: 20, bounds: {}};
  
        
        $scope.regions = [
          {
            id: 0,
            path: [
              {latitude: 39.13773735160255, longitude: -86.51972115039825, id: 0},
              {latitude: 39.137606286024926, longitude: -86.51961386203766},
              {latitude: 39.137664537422864, longitude: -86.51949316263199},
              {latitude: 39.13779768329436, longitude: -86.51960045099258}
            ]
          }
        ]
        
        $scope.markers= [{
            id: 0,
            show: true,
            latitude: 39.13773735160255,
            longitude: -86.51972115039825
          }]
          
        $scope.windowShow = true;
        $scope.windowCoord = {
          latitude: 39.13773735160255,
          longitude: -86.51972115039825
        }
          
        $scope.markers[0].show = true
        
        $scope.events = {
          click: function(polygon, eventName, model) {
            // show the window
            for(var i = 0; i < $scope.markers.length; i++) {
              if(model.path[0].id == $scope.markers[i].id) {
                 $scope.markers[i].show = true;
                console.log("Window Displayed")
              } else {
                $scope.markers[i].show = false;
              }
            }
          }
       };
        
    });

<!DOCTYPE html>
<html xmlns:ng="http://angularjs.org/" ng-app="appMaps">

<head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <link rel="stylesheet" href="style.css" />
    <script src="https://code.angularjs.org/1.3.14/angular.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.js"></script>
    <script src="http://rawgit.com/angular-ui/angular-google-maps/2.0.X/dist/angular-google-maps.js"></script>
    <script type='text/javascript' src='script.js'></script><!--script-->
    <!--css-->
    <style type="text/css">
        html, body, #map_canvas {
            height: 100%;
            width: 100%;
            margin: 0px;
        }

        #map_canvas {
            position: relative;
        }

        .angular-google-map-container {
            position: absolute;
            top: 0;
            bottom: 0;
            right: 0;
            left: 0;
        }
    </style>
</head>

<body>
    <div id="map_canvas" ng-controller="mainCtrl">
    <ui-gmap-google-map center="map.center" zoom="map.zoom" draggable="true" options="options" bounds="map.bounds">
        <ui-gmap-polygon static="true" ng-repeat="p in regions track by p.id" path="p.path" visible="p.visible" stroke="p.stroke" fill="p.fill" events="events" clickable="true" >
		    </ui-gmap-polygon>
        
          <ui-gmap-window coords="windowCoord" show="windowShow">
              <div ng-non-bindable>Test</div>
          </ui-gmap-window>
    </ui-gmap-google-map>
</div>
<!--example-->
</body>

</html>

/* style file */