Display different data on one HTML page in AngularJS

Question

I make a site in AngularJS exactly like this: http://www.aboveandbeyond.nu

There is a page on the website where I display a list of links using ng-repeat, I take data from a JSON file. I want, when someone clicks on a specific link, I need to display a specific dataset on a new page corresponding to the link. For reference, you can check the functionality of this page: http://www.aboveandbeyond.nu/abgt

I cannot do this with Routing because there are many links, and I do not want to create a new page for each link separately, so routing is not an option. What else can I do for this?

EDIT 1:

this is part of the code that displays a list of podcasts:

<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 the controller (this is 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 want to get information from this place:

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

Your help is appreciated. Thank you.

Answer 1

Use 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 explain it only with stackoverflow.

This is what you need to learn if you want to create any web application that uses the API to retrieve information.

, url /artist/: name, name URL.

, : name, URL-, JSON, , , URL-.