title: Access nested JSON object in AngularJS controller
body: <p>I am new to AngularJS and trying to create a <code>$scope</code> for <code>tracks</code> for later usage</p>
  
  <p>data.json (sample):</p>
  
  <pre><code>[
  {
      "album": "Album name",
      "tracks": [
          {
              "id": "1",
              "title": "songtitle1",
              "lyric": "lyrics1"
          },
          {
              "id": "2",
              "title": "songtitle2",
              "lyric": "lyrics2"
          }
      ]
  }
  ]
  </code></pre>
  
  <p>Controller</p>
  
  <pre><code>app.controller('lyricsCtrl', function($scope, $http) {
  $http.get('data.json')
      .then(function(result) {
          $scope.albums = result.data;
          $scope.tracks = result.data.tracks;
  
          console.log($scope.tracks);  //Undefined...
      });
  });
  </code></pre>
  
  <p>Why is <code>$scope.tracks</code> undefined?</p>