Problem with UI Router and child state - URL changes but not the view

Hey guys, it’s my first App that I’m writing with Ionic Framework and I came across a problem with UI router. It’s quite simple survey app, I just want someone - after selecting face from survey to answer some additional questions. I need questions to be a child of survey because of resolve data. Problem is that when I want to go to questions state from it’s parent survey only URL changes and nothing happens. No error, just nothing. Can you please help, I’m struggling whole day now.

My routes:

$urlRouterProvider.otherwise('/survey');
$stateProvider
// this state is placed in the <ion-nav-view> in the index.html
.state('main', {
  url: '/main',
  template: '<ion-view </ion-nav-view>',
  // templateUrl: 'main/templates/<someTemplate>.html',
  // controller: 'SomeCtrl as ctrl'

})
.state('survey', {
  url: '/survey',
  templateUrl: 'main/templates/survey.html',
  controller: 'SurveyCtrl',
  resolve: {
    questions: function($stateParams, $http) {
      return $http.get('http://localhost:3100/api/surveys/new').then(function(response){
        return response.data;
      });
    }
  }
})
.state('survey.question', {
  url: '/questions',
  templateUrl: 'main/templates/questions.html',
  controller: 'QuestionsCtrl',
  params: {
    selectedFace: null
  }
})

index.html

<!doctype html>
<html>
 <head>
  <meta charset="utf-8">
  <meta name="description" content="">
  <!-- ionic meta tags -->
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
  <!-- custom meta tags -->
  <meta name="format-detection" content="telephone=no"> <!-- no auto telephone linking -->
  <link href="https://fonts.googleapis.com/css?family=Roboto+Condensed:700" rel="stylesheet">


  <meta name="apple-mobile-web-app-capable" content="yes"> <!-- can be saved to home screen on ios -->
  <title>Store Satisfaction</title>

  <!-- build:css styles/vendor.css -->
  <!-- bower:css -->
  <!-- endbower -->
  <!-- endbuild -->

  <!-- build:css main/styles/app.css -->
  <!-- inject:css -->
  <link rel="stylesheet" href="main/styles/main.css">
  <!-- endinject -->
  <!-- endbuild -->
</head>
<body ng-app="storeSatisfaction">


<!-- the current view will be rendered in the <ion-nav-view> directive -->
<ion-nav-view></ion-nav-view>


<!-- will be a 404 during development -->
<script src="cordova.js"></script>

<!-- build:js scripts/vendor.js -->
<!-- bower:js -->
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-animate/angular-animate.js"></script>
<script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
<script src="bower_components/angular-ui-router/release/angular-ui-router.js"></script>
<script src="bower_components/ionic/release/js/ionic.js"></script>
<script src="bower_components/ionic/release/js/ionic-angular.js"></script>
<script src="bower_components/ngCordova/dist/ng-cordova.js"></script>
<script src="bower_components/angular-dynamic-locale/src/tmhDynamicLocale.js"></script>
<script src="bower_components/angular-translate/angular-translate.js"></script>
<script src="bower_components/angular-translate-loader-static-files/angular-translate-loader-static-files.js"></script>
<script src="bower_components/localforage/dist/localforage.js"></script>
<script src="bower_components/underscore/underscore.js"></script>
<!-- endbower -->
<!-- endbuild -->

<!-- build:js scripts/app.js -->
<!-- inject:js -->
<script src="main/main.js"></script>
<script src="main/controllers/survey-ctrl.js"></script>
<script src="main/controllers/questions-ctrl.js"></script>
<script src="main/constants/config-const.js"></script>
<script src="app.js"></script>
<!-- endinject -->
<!-- endbuild -->
 </body>
</html>

survey.html

<ion-view title="survey">
 <ion-content>
  <div class="main-image polygon">
  <div class="main-text">
    <p class="sub-header">smth</p>
    <p class="main-header">smth</p>
  </div>
</div>
<ion-list>
  <ion-item class="item item-icon">
    <a><img src="main/assets/images/smile1.png" class="smiley-face" ng-click="proceedSurvey('very_good', 'positive')"></a>
  </ion-item>
  <ion-item class="item item-icon">
    <img src="main/assets/images/smile2.png" class="smiley-face" ng-click="proceedSurvey('good', 'positive')">
  </ion-item>
  <ion-item class="item item-icon">
    <img src="main/assets/images/smile3.png" class="smiley-face" ng-click="proceedSurvey('neutral', 'negative')">
  </ion-item>
  <ion-item class="item item-icon">
    <img src="main/assets/images/smile4.png" class="smiley-face" ng-click="proceedSurvey('bad', 'negative')">
  </ion-item>
  <ion-item class="item item-icon">
    <img src="main/assets/images/smile5.png" class="smiley-face" ng-click="proceedSurvey('very_bad', 'negative')">
  </ion-item>
</ion-list>

This looks…quite wrong.

Then, I just can’t understand why you want questions to be a child of survey, doesn’t make much sense to me. Why not just make it a different page.

But in any case your child views and the UI router are working perfectly. As you can see from the UI Router documentation explaining nested views (Nested States & Nested Views · angular-ui/ui-router Wiki · GitHub) when you nest views you have to tell UI router where to render the child view with a ui-view directive like <div ui-view></div>. It’s not just just magically going to know where to render the child content, you have to tell it.

Since your survey.html doesn’t have a <div ui-view></div> anywhere, ui router doesn’t render content anywhere, and only updates the url, as expected.