Ionic $state.go not working on device

Question

I'm currently working on an app, build using Ionic. My problem is that $state.go is only working in the browser but not on the phone. This seem to be a common problem, but after reading a lot of answers to the same questions, I still can't figure out how to fix it.

The general fix seems to be to ensure you're using relative URLs as explained here: Using Angular UI-Router with Phonegap but I still can't get it to work. What am I missing?

Link to plunker: http://plnkr.co/edit/qFJ1Ld6bhKvKMkSmYQC8?p=preview

App.js structure:

    ....
    $stateProvider
      .state('parent', {
      url: "/",
      templateUrl: "parent.html"
    })
    .state('parent.child', {
      url: "child",
      templateUrl: "child.html"
    })
    $urlRouterProvider.otherwise("/")
    })
    ....

Answer 1

For state.go to work you have to inject $state dependency to your controller

app.controller('ParentCtrl', ['$scope', '$state', function($scope, $state) {
  $scope.$state = $state
}]);

app.controller('MenuCtrl', ['$scope', '$state', function($scope, $state){

    $scope.goTo = function(){
        $state.go('menu.kategorier');
    }

}]);

and you have to register the state you want to goto in $stateProvider

$stateProvider
.state('menu.kategorier', {...})

and to get to that state you have to go from parent state like 'menu' in this case. you cannot change state from 'parent' to 'menu.kategorier' but you can goto 'parent.child' from 'parent'

Answer 2

I solved it by changing my setup for the nested views, based on this example: http://codepen.io/mhartington/pen/Bicmo

Here is my plunker, for those who are interested:

Plunker: http://plnkr.co/edit/2m5bljMntpq4P2ccLrPD?p=preview

app.js structure:

    $stateProvider
      .state('eventmenu', {
      url: "/event",
      abstract: true,
      template: "<ion-nav-view name='menuContent'></ion-nav-view>"
      })

      .state('eventmenu.home', {
      url: "/home",
      views: {
        'menuContent' :{
          templateUrl: "home.html"
        }
      }
     })

     .state('eventmenu.home.home1', {
     url: "/home1",
     views: {
       'inception' :{
         templateUrl: "home1.html"
       }
     }
    })