Click list item, page transits but details page shows only no item details except for ()


Currently, main list html works

 <div class="post row" ng-repeat="(postId, post) in posts">
   <a href="{{ post.url }}">{{ post.title }}</a>

But when I click the item (one of the many in the list) and go to another page, the new page does not display the item in detail?


When I add the line below, including $stateParams in the dependencies, into the controller js file, {{ post.title }} appears but the data does not pass through. 

$scope.post = $scope.posts[$stateParams.id]



UPDATE
This is the states code. (ignore missing syntax...im shortening it). Someone helped resolved the previous issue and provided the below codes for the viewing part (the last 2 states).

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



How the details are access after clicking on the list item.

app.controller('PostViewCtrl', function ($scope, $stateParams, Post) {
    $scope.Post = Post.find($stateParams.postId);   //i think this may be broken

One key piece that is missing in your question is how your stateProvider is configured. Please ensure that your states have the url set up correctly to send data though state parameters. I have a codepen here that shows one way to to have a list of items where clicking on one will take the user to it's details. Note how the states are set up...

angular.module('ionicApp', ['ionic'])

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

  $stateProvider
    .state('tabs', {
      url: "/tab",
      abstract: true,
      templateUrl: "tabs.html"
    })
    .state('tabs.home', {
      url: "/home",
      views: {
        'home-tab': {
          templateUrl: "home.html",
          controller: 'HomeTabCtrl'
        }
      }
    })
    .state('tabs.detailview', {
      url: "/detailview/:index", //NOTE: :index is how you use $stateParams later on.
      views: {
        'home-tab': {
          templateUrl: "detailview.html",
          controller: 'DetailviewTabCtrl'
        }
      }
    });


   $urlRouterProvider.otherwise("/tab/home");

});

Then, in your controller...

.controller('DetailviewTabCtrl', function($scope,$stateParams) {
  $scope.id = parseInt($stateParams.index);//NOTE: This is the same 'index' 
  $scope.previous = parseInt($stateParams.index) - 1;
  $scope.next = parseInt($stateParams.index) + 1;
});

I don't know what {{post.url}} is in the ng-repeat; but I think you need a different $state that should handle the detail View.

Do something like:

<div class="post row" ng-repeat="(postId, post) in posts">
   <a ui-sref="postDetail({id:post.id })">{{ post.title }}</a>
</div>

You then need a state definition in your app config's $stateProvider like this:

.state('postDetail', {
      url: "/post/:id", 
      //NOTE: :id will be accessed from the controller using $stateParams later on.
      templateUrl: "post_detail.html",
      controller: 'PostDetailCtrl'
    }) ...

That should do it.