How to print a specific item's title after clicking on their link

Hey I was wondering if someone could help me out in how can I print a specific item's title after clicking on their link. My code is essentially the default menu start:

In my mainPage I have:

<ion-view view-title="main">
    <ion-content>
        <ion-list>
            <ion-item ng-repeat="page in sidePages" href="#/abstractMain/mainPage/{{page.id}}">
                {{page.title}}
            </ion-item>
        </ion-list>
    </ion-content>
</ion-view>

Each item is linked to my Page view:

<ion-view view-title="Page">
    <ion-content>
       <!-- display {{page.title}} -->  
       <h1>Hello</h1>
    </ion-content>
</ion-view>

And my controller for sidePages is:

.controller('pageCtrl', function($scope){
  $scope.sidePages = [
    { title: 'name 1', id: 1 },
    { title: 'name 2', id: 2 },
    { title: 'name 3', id: 3 },
    { title: 'name 4', id: 4 },
    { title: 'name 5', id: 5 },
    { title: 'name 6', id: 6 }
  ];
});

I'm not sure how to show each sidePages title when you click at their page, because right now they all just print "Hello". Is there a way to do this or do I have to rethink my design?

I think you should rethink your design. Here is one possible way:

  1. Create a service which holds your pages.

  2. Create two controllers: one for the page list and one for the opened page. Inject the created service into both controllers. You have access to the array of pages through this service.

  3. You could add a getAll() and a get(id) method to the service. It's straightforward what are these doing, right?

  4. In the controller of the pageList: $scope.sidePages = PagesService.getAll() and the controller of the single page: $scope.page = PagesService.get(id). You find the id of the opened page in the $stateParams object (you need to inject that too in you controller).

I hope this is enough to get you started at least.