Creating n number of circles on google map with ng-maps - angularjs

Question

I've read a few other posts that are similar in nature on SO, but I still don't understand what I have done wrong.
I want to create multiple circles on a google map from a json string configured like:
[
{"name":"0","lat":30.45,"long":91.15},
{"name":"1","lat":0.0,"long":0.0},
{"name":"5","lat":0.0,"long":0.0}
]
I am hoping I can just iterate through the string and set the respective values.
The variable geofences is bound to the containing div with the ng-app declaration.
This is my current try:
<ng-map class=map zoom="15" center="[30.45, -91.15]">
<marker position="[30.45, -91.15]" />
<shape
ng-repeat="fence in geofences"
name="{{fence.name}}"
radius="40"
center="[{{fence.lat}}, {{fence.long}}]"
radius="40" />
<control name="overviewMap" opened="true" />
</ng-map>
I expect it has something to do with getting the values from a variable as if I hard code a value it works
This is what the Chrome developer console output:
angular.js:12332 TypeError: Cannot read property 'id' of undefined
and at the very bottom of the stack trace:
<shape ng-repeat="fence in geofences" name="{{fence.name}}" center="[{{fence.lat}}, {{fence.long}}]" radius="40" class="ng-scope >
What have I done incorrectly or worst case scenario how could I do something like this?

Answer 1

Most likely you are getting this error since google.maps.Circle object could not be created. shape directive expects name attribute that corresponds to map object (see below list), the provided values (e.g. "0" or "1") are invalid
The list of supported shape names:
circle
polygon
polyline
rectangle
groundOverlay
image
So, since your goal is to display circles, specify for name attribute cicrle value:
<shape ng-repeat="fence in geofences"
name="circle"
radius="40"
center="[{{fence.lat}}, {{fence.long}}]"
/>
Example
var app = angular.module('mapApp', ['ngMap']);
app.controller('mapCntrl', function ($scope) {
$scope.geofences = [
{ "name": "circle", "lat": 30.45, "long": -91.15 }
];
});
<script src="https://maps.google.com/maps/api/js?libraries=placeses,visualization,drawing,geometry,places"></script>
<script src="https://code.angularjs.org/1.3.15/angular.js"></script>
<script src="https://rawgit.com/allenhwkim/angularjs-google-maps/master/build/scripts/ng-map.js"></script>
<div ng-app="mapApp" ng-controller="mapCntrl">
<ng-map class=map zoom="15" center="[30.45, -91.15]">
<marker position="[30.45, -91.15]" />
<shape ng-repeat="fence in geofences"
name="circle"
radius="40"
center="[{{fence.lat}}, {{fence.long}}]"
/>
<control name="overviewMap" opened="true" />
</ng-map>
</div>
Plunker