AngularJS ng-click to go to another page (with Ionic framework)

Based on comments, and due to the fact that @Thinkerer (the OP - original poster) created a plunker for this case, I decided to append another answer with more details.

• Here is a plunker created by @Thinkerer
• here is its updated and working version

The first and important change:

// instead of this$urlRouterProvider.otherwise('/tab/post');// we have to use this$urlRouterProvider.otherwise('/tab/posts');

because the states definition is:

.state('tab', {  url: "/tab",  abstract: true,  templateUrl: 'tabs.html'}).state('tab.posts', {  url: '/posts',  views: {    'tab-posts': {      templateUrl: 'tab-posts.html',      controller: 'PostsCtrl'    }  }})

and we need their concatenated url '/tab' + '/posts'. That's the url we want to use as a otherwise

The rest of the application is really close to the result we need...
E.g. we stil have to place the content into same view targetgood, just these were changed:

.state('tab.newpost', {  url: '/newpost',  views: {    // 'tab-newpost': {    'tab-posts': {      templateUrl: 'tab-newpost.html',      controller: 'NavCtrl'    }  }

because .state('tab.newpost' would be replacing the .state('tab.posts' we have to place it into the same anchor:

<ion-nav-view name="tab-posts"></ion-nav-view>  

Finally some adjustments in controllers:

$scope.create = function() {    $state.go('tab.newpost');};$scope.close = function() {      $state.go('tab.posts'); };

As I already said in my previous answer and comments ... the $state.go() is the only right way how to use ionic or ui-router

Check that all hereFinal note - I made running just navigation between tab.posts... tab.newpost... the rest would be similar

Use <a> with href instead of a <button> solves my problem.

<ion-nav-buttons side="secondary">  <a class="button icon-right ion-plus-round" href="#/app/gosomewhere"></a></ion-nav-buttons>

One think you should change is the call $state.go(). As described here:

• $state.go(to [, toParams] [, options])

The param passed should be the state name

$scope.create = function() {  // instead of this  //$state.go("/tab/newpost");   // we should use this  $state.go("tab.newpost"); };

Some cite from doc (the first parameter to of the [$state.go(to \[, toParams\] \[, options\]):

to

String Absolute State Name or Relative State Path

The name of the state that will be transitioned to or a relative state path. If the path starts with ^ or . then it is relative, otherwise it is absolute.

Some examples:

$state.go('contact.detail') will go to the 'contact.detail' state$state.go('^') will go to a parent state.$state.go('^.sibling') will go to a sibling state.$state.go('.child.grandchild') will go to a grandchild state.