How to link dynamic list to different files?



I am using side menu template and created dynamic list but now I am stuck !

Please anybody help me. I have created dynamic list

   .config(function($stateProvider, $urlRouterProvider) {

    .state('app', {
    url: '/app',
    abstract: true,
    templateUrl: 'templates/menu.html',
    controller: 'AppCtrl'

    .state('app.suralists', {
      url: '/suralists',
      views: {
        'menuContent': {
          templateUrl: 'templates/suralists.html',
          controller: 'PlaylistsCtrl'

  .state('app.single', {
    url: '/suralists/:suralistId',
    views: {
      'menuContent': {
        templateUrl: 'templates/suralist.html',
        controller: 'PlaylistCtrl'
  // if none of the above states are matched, use this as the fallback

and Controller is

.controller('PlaylistsCtrl', function($scope) {
  $scope.suralists = [
      id: '1',
      title: 'Ya-Sin',
      desc: '(No: 36, Verses: 83, Makki)',
      id: '2',
      title: 'Ar-Rahman',
      desc: '(No: 55, Verses: 78, Madani)',
      id: '3',
      title: 'Al-Waqi',
      desc: '(No: 56, Verses: 96, Makki)',
      id: '4',
      title: 'Ar-Rum',
      desc: '(No: 30, Verses: 60, Makki)',
      id: '7',
      title: 'Al-Hashr',
      desc: '(No: 59, Verses: 24, Madani)',
      id: '18',
      title: 'Al-Falaq',
      desc: '(No: 113, Verses: 5, Makki)',


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



and suralists.html is

<ion-view view-title="Quran Sura List">
      <ion-item ng-repeat="suralist in suralists" class="item-left item-icon-left" href="#/app/suralists/{{}}">
        <i class="icon ion-ios-book"></i>
        {{suralist.title}}<div class="item-note">{{suralist.desc}}</div>

and suralist.html is

<ion-view view-title="Ya-Sin" id="2">

I want every dynamic list when clicked, new file or new view will open, how can I do this?


Take a look at my blog article:

It covers excatly what you need.


Thanks for reply @Gajotres

Not exactly what I need. I am trying to define

list item 1 should open separate static content
list item 2 should open separate static content

Now I think you can understand what I want.


What do you mean by: “separate static content”?

Do you have predefined pages and each list element should lead to them?


I have already published my code in my first post.

stating content mean


<ion-view view-title="ContentA">



I mean if I click on first list item it should open a.html and when I click on second list item it should open b.html and so on


Before we continue any further … isn’t this counterproductive to have a separate prebuilt page for a dynamic content?
This doesn’t make any sense.

You can still reuse most of my code though you will not use a:


Instead you will need to change your page programmatically using:

$state.go('view', {movieid: 1});


I am new can you please explain in detail?

We can change this that every time when list 1 clicked than it should show different content and so on