How to click on a item in a list and view the item in a new page? AngularJS and Ionic

I have a list of items where ideally, upon clicking the item, would bring me to the post itself. I dont know how to have that..I tried ng-click within the header but i think the route itself isnt working.

For testing purposes, I have used a line where the work VIEW, upon clicking should lead to the function above. My suspect is the problem lies with the app.js states and how I define it in the $state.go.

Appreciate any help. Many thanks!

The main list html

<ion-view ng-controller="NavCtrl"> 
    <div class="container posts-page">
          <div class="post row" ng-repeat="(postId, post) in posts">

    <a ng-click="view()">VIEW</a> <!-- the VIEW when clicked = no actions -->


The js file using 'tab.view' doesnt work.

    $scope.view = function() {
      $state.go('tab.posts.view', {postId: postId});
    };


The app.js state file

.state('tab.posts', {
  url: '/posts',
  views: {
    'tab-posts': {
      templateUrl: 'templates/tab-posts.html',
      controller: 'PostsCtrl'

.state('tab.posts.view', {
  url: '/:postId',
  views: {
    'tab-posts':{
      templateUrl: 'templates/tab-showpost.html',
      controller: 'PostViewCtrl'

There is a working plunker, showing HOW TO:

.state('tab.posts', {
  url: '/posts',
  views: {
    'tab-posts': {
      templateUrl: 'tab-posts.html',
      controller: 'PostsCtrl'
    },
  }
})
.state('tab.posts.view', {
  url: '/:postId',
  views: {
    // here is the issue, instead of this
    // 'tab-posts':{
    // we have to use this
    'tab-posts@tab':{
      templateUrl: 'tab-showpost.html',
      controller: 'PostViewCtrl'
    }

as the code example shows, the problem is, that we have to use the absolute view naming:

Behind the scenes, every view gets assigned an absolute name that follows a scheme of viewname@statename, where viewname is the name used in the view directive and state name is the state's absolute name, e.g. contact.item. You can also choose to write your view names in the absolute syntax.

So, because we want to target the view of the state tab named tab-posts we have to use absolute naming: 'tab-posts@tab'

Also, we should pass the postId into the view() function, or we can directly use the ui-sref

<a ng-click="view(postId)">VIEW</a>
<a ui-sref="tab.posts.view({postId: postId})">VIEW</a>

For completeness, there is update view func, taking the post id:

$scope.view = function(postId) {
    $state.go('tab.posts.view', {postId: postId});
};

All that could be observed here