Angular ngrepeat multiple items in an array using directive

Question

I need to list multiple items with different info(song name, artist name, album name, album image). These information are in an array in an angular directive and I need to inject them into separate templateUrl using element injection. This is the directive

 app.directive('songList', function($filter) {
   return {
     restrict: 'E',
     templateUrl: $filter('baseUrl')("/content/mobile/app/views/addmusic/songList.html"),
     controller: function($scope, $timeout) {
       $scope.loadMoreSongs = function() {
         $scope.busy = true;
         $timeout(function() {
           $scope.offset += $scope.pageSize;
           if ($scope.offset > $scope.songs.length)
             $scope.offset = $scope.songs.length;
           $scope.busy = false;
         }, 300);
       };

       $scope.songs = [{
         "id": 1,
         "songName": "Children of the Sea",
         "artistName": "Black         Sabbath",
         "albumName": "Heaven and Hell",
         "thumbnailUrl": "http://upload.wikimedia.org/wikipedia/en/f/f8/Black_Sabbath_Heaven_and_Hell.jpg"
       }, {
         "id": 2,
         "songName": "Turbo Lover",
         "artistName": "Judas Priest",
         "albumName": "Turbo Lover",
         "thumbnailUrl": "http://upload.wikimedia.org/wikipedia/en/8/8a/Judas_Priest_Turbo.jpg"
       }, {
         "id": 3,
         "songName": "High Hopes",
         "artistName": "Pink Floyd",
         "albumName": "Divison Bell",
         "thumbnailUrl": "http://upload.wikimedia.org/wikipedia/el/9/96/Pink_floyd_the_division_bell_front.jpg"
       }, {
         "id": 4,
         "songName": "When a Blind Man Cries",
         "artistName": "Deep Purple",
         "albumName": "Machine Head",
         "thumbnailUrl": "http://www.inthestudio.net/wp-content/uploads/2012/08/deep_purple_machine_head_640x640.jpg"
       }, {
         "id": 5,
         "songName": "Amamos La Vida",
         "artistName": "Accept",
         "albumName": "Objection Overruled",
         "thumbnailUrl": "https://farm8.staticflickr.com/7051/6982758045_167210f89e.jpg"
       }];
     },
     controllerAs: 'song'
   }
 });

This is the templateUrl (songListItem.html) where one song is shown:

<li class="media">
  <a ng-href="#">
    <div class="song-names-container">
      <div class="img-container media-left">
        <img class="media-object img-frame" src="{{song.thumbnailUrl}}" alt="" />
      </div>
      <div class="media-body">
        <h3><strong>{{song.songName}}</strong></h3>
        <div>
          <p>{{song.artistName}} - {{song.albumName}}</p>
        </div>
      </div>
    </div>
  </a>
</li>

And this is the main html page (songList.html) where the ngrepeat is suposed to get in action and display the list of songs:

<div class="add-music-form">
  <div class="modal-header">
    <input type="search" class="form-control" placeholder="Search over 15 million songs..." />
  </div>
  <div class="song-names-title">
    <p>Songs</p>
  </div>
  <div class="modal-body">
    <ul class="media-list">
      <song-list-item ng-repeat="song in songs"></song-list-item>
    </ul>
    <div class="more-songs"></div>
    <div class="album-names-title"></div>
    <div class="album-names"></div>
  </div>
</div>

Any help would be greatly appreciated.

Answer 1

Found the solution. I didn't place the songList directive anywhere. I added the index.html file, included it there.

<div class="musicMain" ng-controller="BasicAppCtrl">
    <song-list></song-list>
</div>

<ul class="media-list">
           <song-list-item data-model="song" ng-repeat="song in songs"></song-list-item>
</ul>

And that is that.