title: AngularJS not putting an array in scope?
body: <p>So I'm attempting to use Angular JS and the angularSoundManager module to create a music player. I can get songs and the player to work fine, but when I tried changing the main array to be albums with an array of songs within each album, I keep getting a error that the albums variable is undefined.</p>
  
  <p>app.js</p>
  
  <pre><code>angular.module('myApp', ['angularSoundManager']).controller('MainCtrl', ['$scope', function ($scope) {
      $scope.albums = [
          {
              id: 'one',
              title: 'album one',
              songs : [
                  {
                      id: 'one',
                      title: 'Rain',
                      artist: 'YaNiggaPaul',
                      url: 'http://www.schillmania.com/projects/soundmanager2/demo/_mp3/rain.mp3'
                  },
                  {
                      id: 'four',
                      title: 'Angry cow sound?',
                      url: 'http://www.freshly-ground.com/data/audio/binaural/Mak.mp3'
                  },
                  {
                      id: 'five',
                      title: 'Things that open, close and roll',
                      url: 'http://www.freshly-ground.com/data/audio/binaural/Things%20that%20open,%20close%20and%20roll.mp3'
                  }
              ]
          },
  
          {
              id: 'two',
              title: 'album two',
              songs : [
                  {
                      id: 'two',
                      title: 'Walking',
                      url: 'http://www.schillmania.com/projects/soundmanager2/demo/_mp3/walking.mp3'
                  },
                  {
                      id: 'three',
                      title: 'Barrlping with Carl (featureblend.com)',
                      url: 'http://www.freshly-ground.com/misc/music/carl-3-barlp.mp3'
                  }
              ]
          }
      ];
  }]);
  </code></pre>
  
  <p>Where the error is popping up in the module.</p>
  
  <pre><code>ngSoundManager.directive('playAll', ['angularPlayer', '$log',
  function(angularPlayer, $log) {
      return {
          restrict: "EA",
          scope: {
              albums: '=playAll'
          },
          link: function(scope, element, attrs) {
              element.bind('click', function(event) {
                  //first clear the playlist
                  angularPlayer.clearPlaylist(function(data) {
                      $log.debug('cleared, ok now add to playlist');
                      //add songs to playlist
                      for(var i = 0; i &lt; scope.albums[attrs.alid]['songs'].length; i++) {
                          angularPlayer.addTrack(scope.albums[attrs.alid]['songs'][i]);
                      }
  
                      if (attrs.play != 'false') {
                          //play first song
                          angularPlayer.play();
                      }
                  });
              });
          }
      };
  }]);
  </code></pre>
  
  <p>more specifically</p>
  
  <pre><code>scope.albums[attrs.alid]['songs'].length
  </code></pre>
  
  <p>Errors with "cannot read property '0' of undefined.</p>
  
  <p>All out of ideas, am I just structuring my table wrong?
  Am new to Angular so any help is super appreciated. &lt;3</p>
  
  <p>EDIT :: call of directive (i think..?).</p>
  
  <pre><code>&lt;li ng-repeat="album in albums"&gt;
                  &lt;button play-all="songs" my-playlist="playlist" data-alid="{{$index}}"&gt;{{album.title}}&lt;/button&gt;
                  &lt;li ng-repeat="song in album.songs"&gt;
                      &lt;button music-player="play" add-song="song"&gt;{{ song.title }}&lt;/button&gt;
                  &lt;/li&gt;
              &lt;/li&gt;
  </code></pre>