title: Nested JSON in AngularJS
body: <p>i am a newbie here with Angular but was hoping someone could help. </p>
  
  <p>Inside of a ng-repeat, i want to display the name then below it list out each of the album titles, then do the same thing for the second name. But it is displaying the name then all the albums below it. How do i sort of tie this all together?</p>
  
  <p>I have a plunker here <a href="http://plnkr.co/edit/4h0xbmNXrgqJYWflXWQk?p=preview" rel="nofollow">http://plnkr.co/edit/4h0xbmNXrgqJYWflXWQk?p=preview</a></p>
  
  <p>I have a json file that looks like this...</p>
  
  <p>sample.json</p>
  
  <pre><code>{
    "artists": [
      {
        "name": "artist1name",
        "albums": [
          {
            "title": "titlealbum1"
  
          },
          {
            "title": "titlealbum2"
          },
          {
            "title": "titlealbum3"
          }
        ]
      },
      {
        "name": "artist2name",
        "albums": [
          {
            "title": "title2album1"
  
          },
          {
            "title": "title2album2"
          },
          {
            "title": "title2album3"
          }
        ]
      }
    ]
  }
  </code></pre>
  
  <p>And then the html page looks like this. </p>
  
  <pre><code>&lt;body ng-app="list"&gt;
  
    &lt;div ng-controller="ListCtrl"&gt;
        &lt;ul&gt;
            &lt;li ng-repeat="artist in artists"&gt;
              &lt;strong&gt; {{artist.name}}&lt;/strong&gt;
              &lt;ul ng-repeat="artist in artists" ng-show="isVisible(artist.name)"&gt;
                &lt;li ng-repeat="album in artist.albums"&gt;{{album.title}}&lt;/li&gt;
              &lt;/ul&gt;
            &lt;/li&gt;
        &lt;/ul&gt;
    &lt;/div&gt;
  
    &lt;script&gt;
    angular.module('list', []);
      function ListCtrl($scope, $http) {
        $http({method: 'GET', url: 'sample.json'}).success(function(data) {
            $scope.artists = [];
            angular.forEach(data.artists, function(value, key) {
                $scope.artists.push(value);
            });
            $scope.isVisible = function(name){
                return true;// return false to hide this artist's albums
            };
          });
      }
    &lt;/script&gt;
  
  &lt;/body&gt;
  </code></pre>