how does app.single work in ionic framework

I am new to ionic framework and also to angularjs. I am trying to understand how does list items get mapped to app.single. In other example I found use of "list.item" for parent "list" state, but that didnt work for me (egghead.io tutorial).
I am using basic ionic app with sidemenu.
Can someone please explain how is app.single getting mapped to playlist item?

playlists.html:

<ion-view view-title="Playlists">
  <ion-content>
    <ion-list>
      <ion-item ng-repeat="playlist in playlists" href="#/app/playlists/{{playlist.id}}">
    {{playlist.title}}
      </ion-item>
    </ion-list>
  </ion-content>
</ion-view>

playlist.html

<ion-view view-title="Playlist">
  <ion-content>
    <h1>Playlist</h1>
  </ion-content>
</ion-view>

controller.js

.controller('PlaylistsCtrl', function($scope) {
$scope.playlists = [
{ title: 'Reggae', id: 1 },
{ title: 'Chill', id: 2 },
{ title: 'Dubstep', id: 3 },
{ title: 'Indie', id: 4 },
{ title: 'Rap', id: 5 },
{ title: 'Cowbell', id: 6 }
];
})

.controller('PlaylistCtrl', function($scope, $stateParams) {
});

app.js

.state('app.playlists', {
  url: "/playlists",
    views: {
      'menuContent': {
      templateUrl: "templates/playlists.html",
      controller: 'PlaylistsCtrl'
    }
  }
})

.state('app.single', {
  url: "/playlists/:playlistId",
    views: {
      'menuContent': {
       templateUrl: "templates/playlist.html",
       controller: 'PlaylistCtrl'
    }
  }
});

In your playlists.html, there's a html tag which gives url to target template for each playlist items.

href="#/app/playlists/{{playlist.id}}"

So, once a user taps on an item in current list, he will get redirected to "/app/playlists/{{playlist.id}}" page.

And then, please kindly focus on app.js which links each controller to desired url.

url: "/playlists/:playlistId",

This is the part where your 'app.single' state is linked to each playlist item. In this case '/app' is omitted by abstract param of 'app' state definition.