# Link to details page in a list not working

**URL:** <https://forum.ionicframework.com/t/link-to-details-page-in-a-list-not-working/41177>\
**Category:** ionic-v1\
**Created:** [January 13, 2016, 4:03pm UTC](https://forum.ionicframework.com/t/link-to-details-page-in-a-list-not-working/41177 "2016-01-13T16:03:51Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![xsantola](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/xsantola/32/95717_2.png) [@xsantola](https://forum.ionicframework.com/u/xsantola)\
**Post date:** [January 13, 2016, 4:03pm UTC](https://forum.ionicframework.com/t/link-to-details-page-in-a-list-not-working/41177/1 "2016-01-13T16:03:51Z")

</div>

Hi folks – I recently started a simple app listing beers and when you’d click on each item, you’d get to the details page of that given beer. I’ve ready tons of posts, articles, and what not… yet for whatever reason I can’t get it to work.

I have created an app with tabs, and the beers are listed under the ‘beers’ tab:

```
.state('tab', {
    url: '/tab',
    abstract: true,
    templateUrl: 'templates/tabs.html'
 })

.state('tab.beers', {
  url: '/beers',
  views: {
    'tab-beers': {
      templateUrl: 'templates/tab-beers.html',
      controller: 'BeersCtrl'
    }
  }
})

```

The details page is:

```
.state('tab.beer', {
url: '/beer/:id',
views: {
  'tab-beer-details': {
    templateUrl: 'templates/beer-details.html',
    controller: 'BeerDetailsCtrl'
    }
  }
})

```

In my templates/tab-beers.html I have the following list:

```
      <ion-list>
        <ion-item class="item-thumbnail-left item-icon-right"
          auto-list-divider auto-list-divider-value="{{ item.type }}" ng-repeat="item in beers" ng-href="#/tab/beer/{{ item.id }}">
      ...
      </ion-list>

```

I’ve also tried with `ui-sref="tab.beer({id: item.id})"` but without luck.

Must be something trivial… but I guess I can’t find the bug.

Thanks for your help guys.

-X.

---

<div class="post-metadata">

**Author:** ![Destroy](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/destroy/32/94194_2.png) [@Destroy](https://forum.ionicframework.com/u/Destroy)\
**Post date:** [January 13, 2016, 5:12pm UTC](https://forum.ionicframework.com/t/link-to-details-page-in-a-list-not-working/41177/2 "2016-01-13T17:12:01Z")

</div>

Hi,

Can you share the code in tabs.html because maybe you forgot to create the ‘tab-beer-details’ view?  
Try to change `tab-beer-details` to `tab-beers`.

---

<div class="post-metadata">

**Author:** ![xsantola](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/xsantola/32/95717_2.png) [@xsantola](https://forum.ionicframework.com/u/xsantola)\
**Post date:** [January 13, 2016, 6:45pm UTC](https://forum.ionicframework.com/t/link-to-details-page-in-a-list-not-working/41177/3 "2016-01-13T18:45:15Z")

</div>

Hi @Destroy – Thanks for your reply. Here’s the code. You might have caught it…

```
<ion-tabs class="tabs-icon-only tabs-color-active-positive">
  <ion-tab title="Brewery" icon-off="ion-home" icon-on="ion-home" href="#/tab/brewery">
    <ion-nav-view name="tab-brewery"></ion-nav-view>
  </ion-tab>

  <ion-tab title="Beers" icon-off="ion-erlenmeyer-flask" icon-on="ion-erlenmeyer-flask" href="#/tab/beers">
    <ion-nav-view name="tab-beers"></ion-nav-view>
  </ion-tab>
  <ion-tab title="Contact" icon-off="ion-at" icon-on="ion-at" href="#/tab/contact">
    <ion-nav-view name="tab-contact"></ion-nav-view>
  </ion-tab>

</ion-tabs>
```

---

<div class="post-metadata">

**Author:** ![xsantola](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/xsantola/32/95717_2.png) [@xsantola](https://forum.ionicframework.com/u/xsantola)\
**Post date:** [January 13, 2016, 7:47pm UTC](https://forum.ionicframework.com/t/link-to-details-page-in-a-list-not-working/41177/4 "2016-01-13T19:47:40Z")

</div>

@Destroy – Changing it per your suggestion brings me slightly further… but I have a hard time to get the link work smoothly… fiddling around in the ios emulator gets me to the page at some point but only after clicking a bit everywhere and moving the pointer around on the app. On top of that the layout is broken, the top of the page does “under” the header, so not properly staying in the view I’m assuming…

---

<div class="post-metadata">

**Author:** ![Destroy](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/destroy/32/94194_2.png) [@Destroy](https://forum.ionicframework.com/u/Destroy)\
**Post date:** [January 14, 2016, 8:55am UTC](https://forum.ionicframework.com/t/link-to-details-page-in-a-list-not-working/41177/5 "2016-01-14T08:55:15Z")

</div>

I applied your code in code ped. here [http://codepen.io/Vatsov/pen/XXaPgX](http://codepen.io/Vatsov/pen/XXaPgX)  
Is it what you are try to do?

---

<div class="post-metadata">

**Author:** ![xsantola](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/xsantola/32/95717_2.png) [@xsantola](https://forum.ionicframework.com/u/xsantola)\
**Post date:** [January 14, 2016, 11:01am UTC](https://forum.ionicframework.com/t/link-to-details-page-in-a-list-not-working/41177/6 "2016-01-14T11:01:16Z")

</div>

@Destroy – Thanks that’s pretty much it. Will review and adapt my code. Thanks again, and nice brewery you chose in your example 😉

---

<div class="post-metadata">

**Author:** ![xsantola](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/xsantola/32/95717_2.png) [@xsantola](https://forum.ionicframework.com/u/xsantola)\
**Post date:** [January 14, 2016, 1:34pm UTC](https://forum.ionicframework.com/t/link-to-details-page-in-a-list-not-working/41177/7 "2016-01-14T13:34:17Z")

</div>

Apparently it still gets a bit funky in `BeerDetailsCtrl`, locally. Investigating as to why now…

---

<div class="post-metadata">

**Author:** ![xsantola](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/xsantola/32/95717_2.png) [@xsantola](https://forum.ionicframework.com/u/xsantola)\
**Post date:** [January 20, 2016, 3:44pm UTC](https://forum.ionicframework.com/t/link-to-details-page-in-a-list-not-working/41177/8 "2016-01-20T15:44:57Z")

</div>

@Destroy – Alright, solved it all. Now trying to move the data into an online .json file that I’ll fetch using $http.get.

I have forked your codepen, and simply moved the beers data array into an online .json file. Unfortunately no luck there. For whatever reason it cannot fetch the data.

Any thoughts?

> **[Beers listing](https://codepen.io/xsa/pen/wMpMdr?editors=001)**
>
> Forked from \[Deyan Vatsov\](http://codepen.io/Vatsov/)'s Pen \[Beers listing\](http://codepen.io/Vatsov/pen/XXaPgX/). Forked from \[Deyan Vatsov\](http:/...

Thanks again.

-X.