title: Accessing nested JSON with AngularJS
body: <p>I'm trying to make and mobile webapp with angular.js, hammer.js and topcoat.</p>
  
  <p>I'm having some trouble on displaying data from a Json file like this one:</p>
  
  <pre><code>{
  "version": "1",
  "artists": {
      "artist1": {
          "name": "artist1name",
          "jpeg": "../img/artist/artist1.jpg",
          "albums": {
              "album1": {
                  "type": "cd",
                  "title": "titlealbum1",
                  "subtitle": "subtitlealbum1",
                  "jpeg": "../img/album1.jpg",
                  "price": "12.00",
                  "anystring1": "anystring1album1",
                  "anystring2": "anystring2album1"
              },
              "album2": [{
                  "type": "cd",
                  "title": "titlealbum2",
                  "subtitle": "subtitlealbum2",
                  "jpeg": "../img/album2.jpg",
                  "price": "12.00",
                  "anystring1": "anystring1album2",
                  "anystring2": "anystring2album2"
              }],
              "album3": [{
                  "type": "cd",
                  "title": "titlealbum3",
                  "subtitle": "subtitlealbum3",
                  "jpeg": "../img/album3.jpg",
                  "price": "13.00",
                  "anystring1": "anystring1album3",
                  "anystring2": "anystring2album3"
              }]
          }
      },
      "artist2": {
          "name": "artist2name",
          "jpeg": "../img/artist/artist2.jpg",
  </code></pre>
  
  <p>My js file is like this:</p>
  
  <pre><code>angular.module('list', [])
  function ListCtrl ($scope, $http) {
  $http({method: 'GET', url: 'json/json_price_1.json'}).success(function(data)
  {
  $scope.artists = data.artists; // response data 
  $scope.albums = data.artists.albums; /this is where im getting trouble
  });        
  };
  </code></pre>
  
  <p>My HTML file is like this:</p>
  
  <pre><code>&lt;body ng-app="list"&gt;
  
  &lt;h3&gt;Titulos&lt;/h3&gt;
  
  &lt;div ng-controller="ListCtrl"&gt;
  &lt;ul ng-repeat="artist in artists"&gt;
          &lt;li &gt;{{artist.name}}&lt;/li&gt;
  
      &lt;/ul&gt;
  &lt;/div&gt;
  
  &lt;div ng-controller="ListCtrl"&gt;
  &lt;ul ng-repeat="album in albums"&gt;
          &lt;li &gt;{{album.title}}&lt;/li&gt;  //not working here. 
  
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p><strong>I want to display all albums and if my user select an specific artist I want to filter those albums.
  The question here is how will I select on this nested json. BTW, the artist.name is displaying correctly.</strong></p>
  
  <p>Second question is, how will I filter those artists with a text field.   </p>