AngularJS - Polygon

angular.module('appMaps', ['uiGmapgoogle-maps'])
  .controller('mainCtrl', function($scope) {
    $scope.map = {
      center: {
        latitude: 40.1451,
        longitude: -99.6680
      },
      zoom: 4,
      bounds: {}
    };
    $scope.map.polygons = [{
      id: 1,
      path: [{
          latitude: 30,
          longitude: -80
        }, {
          latitude: 35,
          longitude: -120
        }, {
          latitude: 40,
          longitude: -95
        }

      ],
      stroke: {
        color: '#6060FB',
        weight: 3
      },
      editable: true,
      draggable: true,
      geodesic: false,
      visible: true,
      clickable: true,
      fill: {
        color: '#2c8aa7',
        opacity: 0.5
      },
      events: {
        click: function(gPoly, eventName, polyModel, latLngArgs) {
          alert("Polygon ID =" + polyModel.id);
          polyModel.fill.opacity = '0.1';
        },
        mouseover: function(gPoly, eventName, polyModel, latLngArgs) {
          polyModel.fill.opacity = '1';
          console.log(polyModel);
        },
        mouseout: function(gPoly, eventName, polyModel) {
          polyModel.fill.opacity = '0.5';
        }
      }
    }, {
      id: 2,
      path: [

        {

          latitude: 20,
          longitude: -80
        }, {
          latitude: 25,
          longitude: -120
        }, {
          latitude: 29,
          longitude: -95
        }
      ],
      stroke: {
        color: 'white',
        weight: 3
      },
      editable: true,
      draggable: true,
      geodesic: false,
      visible: true,
      clickable: true,
      fill: {
        color: 'white',
        opacity: 0.5
      },
      events: {
        click: function(gPoly, eventName, polyModel, latLngArgs) {
          alert("Polygon ID =" + polyModel.id);
          polyModel.fill.opacity = '0.1';
        },
        mouseover: function(gPoly, eventName, polyModel, latLngArgs) {
          polyModel.fill.opacity = '1';
          console.log(polyModel);
        },
        mouseout: function(gPoly, eventName, polyModel) {
          polyModel.fill.opacity = '0.5';
        }
      }
    }];


  });

<!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 map.polygons" path="p.path" stroke="p.stroke" visible="p.visible"
                 geodesic="p.geodesic" fill="p.fill" fit="false" editable="p.editable" draggable="p.draggable" events="polygonEvent" models="polygons">
      </ui-gmap-polygon>-->
               

            <ui-gmap-polygons events="'events'"  models="map.polygons " path='"path"' 
             fill="'fill'"  idkey="'id'"
             stroke="{ color: '#2c8aa7', weight: 2}"  visible="true" geodesic="true" fit="false"
             chunk="100" cleanchunk="200">
        </ui-gmap-polygons>
        
    </ui-gmap-google-map>
</div>
<!--example-->
</body>

</html>

/* style file */