title: How to load Nested Arrays in Angular?
body: <p>I have a codepen of some code I am playing with. I want to load the json data through a service and then use ng-repeat to load the arrays. </p>
  
  <p>The problem is that it loads the first array just fine. However, the nested array "data.cities" doesn't show up. In the console, it states that its too much recursion. Here is the link and code below.</p>
  
  <p><a href="http://codepen.io/modDesigns/pen/XmRBqx" rel="nofollow">Codepen Link</a></p>
  
  <p><strong>html</strong></p>
  
  <pre><code>&lt;div ng-app="myApp" ng-controller="nameController"&gt;
  &lt;div class="container"&gt;
      &lt;div class="row"&gt;
          &lt;div class="col-md-12"&gt;
  
              &lt;div ng-repeat="r in data"&gt;
                  &lt;div&gt;{{ r.region }} - x: {{ r.x}}, y: {{r.y}} ---- {{ r.desc}}&lt;/div&gt;
                  &lt;div ng-repeat="city in data.cities"&gt;{{city.name}}&lt;/div&gt;
                  &lt;div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p><strong>JS</strong></p>
  
  <pre><code>var app = angular.module("myApp", []);
  
  app.controller("nameController", function($scope, mapService) {
  $scope.data = mapService.mapData();
  });
  
  app.service("mapService", function() {
  
  var mapInfo = [{
      region: "America",
      desc: "Some info about America",
      x: 50,
      y: 200,
      cities: [{
          name: "Chicago",
          x: 20,
          y: 232
      }, {
          name: "Los Angeles",
          x: 52,
          y: 124
      }]
  }, {
      region: "Europe",
      desc: "Some info about Europe",
      x: 10,
      y: 24,
      cities: [{
          name: "Chicago2",
          x: 20,
          y: 232
      }, {
          name: "Los Angeles2",
          x: 52,
          y: 124
      }]
  }, {
      region: "China",
      desc: "Some info about China",
      x: 88,
      y: 126,
      cities: [{
          name: "Chicago3",
          x: 20,
          y: 232
      }, {
          name: "Los Angeles3",
          x: 52,
          y: 124
      }]
  }];
  
  this.mapData = function() {
      /*angular.forEach(pics, function(value, key) {
       //console.log("key", value.name);
        return value.name;
      });*/
      return mapInfo;
  };
  
  });
  </code></pre>