angular.module("app", ["uiGmapgoogle-maps"])
  .config(function(uiGmapGoogleMapApiProvider) {
    uiGmapGoogleMapApiProvider.configure({
      libraries: 'drawing,geometry,visualization'
    });
  })
  .controller("mainCtrl", function($scope, $window, uiGmapIsReady) {
    //prevent error google undefined
    var google = {
      maps: {
        ControlPosition: {},
        drawing: {
          OverlayType: {}
        },
      }
    };
    var selectedShape;
    var polygon;
    var drawingManager;
    var allShapes = [];
    //make no selection
    function clearSelection() {
      if (selectedShape) {
        selectedShape.setEditable(false);
        selectedShape = null;
      }
    }
    //set selection to a shape
    function setSelection(shape) {
      clearSelection();
      selectedShape = shape;
      shape.setEditable(true);
    }
    //delete selected shape
    function deleteSelectedShape() {
      if (!selectedShape) {
        alert("There are no shape selected");
        return;
      }
      var index = allShapes.indexOf(selectedShape);
      allShapes.splice(index, 1);
      selectedShape.setMap(null);
      console.log("allshapes after removing one", allShapes);
    }
    //get path coords
    function getShapeCoords(shape) {
      var path = shape.getPath();
      var coords = [];
      for (var i = 0; i < path.length; i++) {
        coords.push({
          latitude: path.getAt(i).lat(),
          longitude: path.getAt(i).lng()
        });
      }
      return coords;
    }


    //When map is ready
    uiGmapIsReady.promise(1).then(function(instances) {
      var map;
      //assign google to window.google
      google = window.google;
      instances.forEach(function(inst) {
        map = inst.map;
        var uuid = map.uiGmap_id;
        var mapInstanceNumber = inst.instance; // Starts at 1.
        //Map click event listener => remove all selection in shape
        google.maps.event.addListener(map, 'click', clearSelection);

      });
      if (!$scope.drawingManagerControl.getDrawingManager) {
        return;
      }
      drawingManager = $scope.drawingManagerControl.getDrawingManager();
      //Event when a shape is drawed
      google.maps.event.addListener(drawingManager, 'overlaycomplete', function(e) {
        // Switch to non-drawing mode after drawing a shape.
        drawingManager.setDrawingMode(null);
        // Add an event listener on this new shape, and make clickable
        //Click = selected
        var newShape = e.overlay;

        console.log('shape coords added', getShapeCoords(newShape));
        newShape.setOptions({
          clickable: true
        });
        newShape.type = e.type;
        google.maps.event.addListener(newShape, 'click', function() {
          setSelection(newShape);
          google.maps.event.addListener(newShape.getPath(), 'insert_at', function() {
            alert('updated shape, go update it in your db');
            console.log("allshapes index updated =", allShapes.indexOf(newShape));
          });
          google.maps.event.addListener(newShape.getPath(), 'set_at', function() {
            console.log('shape coords updated', getShapeCoords(newShape));
            alert('updated shape, go update it in your db');
          });
        });
        allShapes.push(newShape);
        console.log("all shapes array", allShapes);
        console.log("first coords", getShapeCoords(allShapes[0]));
        //after drawing = set selected
        setSelection(newShape);
      });
      google.maps.event.addListener(drawingManager, 'drawingmode_changed', clearSelection);
    });

    $scope.map = {
      center: {
        latitude: 19.997454,
        longitude: 73.789803
      },
      zoom: 10,
      //mapTypeId: google.maps.MapTypeId.ROADMAP,
      //radius: 15000,
      stroke: {
        color: '#08B21F',
        weight: 2,
        opacity: 1
      },
      fill: {
        color: '#08B21F',
        opacity: 0.5
      },
      geodesic: true, // optional: defaults to false
      draggable: false, // optional: defaults to false
      clickable: false, // optional: defaults to true
      editable: false, // optional: defaults to false
      visible: true, // optional: defaults to true
      control: {},
      refresh: "refreshMap",
      options: {
        scrollwheel: true
      },
      Polygon: {
        visible: true,
        editable: true,
        draggable: true,
        geodesic: true,
        stroke: {
          weight: 3,
          color: 'red'
        }
      },
      source: {
        id: 'source',
        coords: {
          'latitude': 19.9989551,
          'longitude': 73.75095599999997
        },
        options: {
          draggable: false,
          //icon: 'assets/img/person.png'
        }
      },
      isDrawingModeEnabled: true
    };
    $scope.drawingManagerControl = {};
    $scope.drawingManagerOptions = {
      drawingControl: true,
      drawingControlOptions: {
        //position: 'TOP_LEFT',
        drawingModes: [
          'polygon'
        ]
      },

      polygonOptions: {
        fillColor: '#BCDCF9',
        strokeColor: '#57ACF9',
        fillOpacity: 0.5,
        strokeWeight: 2,
        clickable: false,
        editable: true,
        zIndex: 1
      }
    };
    $scope.removeShape = function() {
      deleteSelectedShape();
    };
  });

<!doctype html>
<html ng-app="app">

<head>
  <meta charset="utf-8">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <title>angular-google-maps</title>
  <link rel="stylesheet" href="style.css" />
  <script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/3.9.3/lodash.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.16/angular.js"></script>
  <script src="//rawgit.com/angular-ui/angular-google-maps/2.1.X/dist/angular-google-maps.js"></script>
  <script src="script.js"></script>
</head>

<body ng-controller="mainCtrl as ctrl">

  <h1>angular-google-maps</h1>
  
  <button ng-click="removeShape()">Remove selected shape</button>

  <ui-gmap-google-map center="map.center" zoom="map.zoom" options="map.options" control="map.control">
    <ui-gmap-marker coords="map.source.coords" options="map.source.options" idkey="map.source.id">
    </ui-gmap-marker>
    <ui-gmap-drawing-manager options="drawingManagerOptions" control="drawingManagerControl"></ui-gmap-drawing-manager>
  </ui-gmap-google-map>
</body>

</html>

.angular-google-map-container {
  height: 600px;
}

# angular-google-maps

Debugging.