Display different data on same HTML page in AngularJS

Question

I'm making a website in AngularJS exactly like this one: http://www.aboveandbeyond.nu

There is a page in the website where I'm displaying a list of links using ng-repeat, I'm taking the data from a JSON file. What I want is when somebody clicks on a particular link I need to display a particular set of data on a new page respective to the link. For reference you may check the functionality of this page: http://www.aboveandbeyond.nu/abgt

I can not do this using Routing because there are a lot of links and I dont want to create new page for each link separately, so routing is not a feasible option. What else can I do to achieve this?

EDIT 1:

this is a part of the code which displays the list of podcast:

<div id="track-list" ng-repeat="track in tracks | filter:search | orderBy: '-date'">
        <a ng-href="#/radio"><h3 class="track-list-title">{{track.title}}</h3></a>
        <p class="track-list-date">{{track.date | date}}</p>
</div>

this is the JSON data inside of a controller (it is a sample data):

mainApp.controller('podcastController', function($scope) {
$scope.pageClass = 'page page-podcast';
$scope.tracks =[
    {title:'Group Therapy 156 with Above & Beyond and Maor Levi', date: new Date(), link:'#'},
    {title:'Group Therapy 156 with Above & Beyond and Maor Levi', date: new Date(), link:'#'},
    {title:'Group Therapy 156 with Above & Beyond and Maor Levi', date: new Date(), link:'#'},
    {title:'Group Therapy 156 with Above & Beyond and Maor Levi', date: new Date(), link:'#'},
    {title:'Group Therapy 156 with Above & Beyond and Maor Levi', date: new Date(), link:'#'},
    {title:'Group Therapy 156 with Above & Beyond and Maor Levi', date: new Date(), link:'#'},
    {title:'Group Therapy 156 with Above & Beyond and Maor Levi', date: new Date(), link:'#'},
    {title:'Group Therapy 156 with Above & Beyond and Maor Levi', date: new Date(), link:'#'},
    {title:'Group Therapy 156 with Above & Beyond and Maor Levi', date: new Date(), link:'#'},
    {title:'Group Therapy 156 with Above & Beyond and Maor Levi', date: new Date(), link:'#'},
    {title:'Group Therapy 156 with Above & Beyond and Maor Levi', date: new Date(), link:'#'}
];});

but ultimately i will ahve to fetch info from this place:

http://musichighcourt.com/soundcloudapp/play_life/podcast/get_podcast.php

Your help is appreciated Thank you

Answer 1

Use the power of dynamic routing.

example using $stateProvider:

$stateProvider
.state('artist.detail', {
    url: "/artist/:contactId",
    templateUrl: 'artist.detail.html',
    controller: <controller-name>
})

Dynamic routing is amazing but it's hard to be able to explain it on stackoverflow alone.

It's something you have to look into if you want to build any kind of web application that uses API's to fetch information.

Basically, dynamic routing allows you to get parameters from the dynamic url like /artist/:name where you can get the :name parameter from the url.

Then, using the :name parameter you got from the url, you can fetch the artist out of the JSON file, database or whatever you're using and display relative information based on the url.