Angular Router - Url changes but view does not loa

Question

I have just started to adapt the sample angular/ionic tab navigation app and have run into a problem. When I click on a link in one view (a list of all journeys), I should be taken to a screen with details about that particular journey. (Adapted from the 'chats' in the sample app. It doesn't quite work however. The URL changes to the expected URL but the view/page doesn't change at all. When I try to refresh the page, I am taken back to my default state/page.

The controllers are:

.controller('JourneysController', function($scope, $log, JourneyHandler) {
  'use strict';

  $log.debug('Activating the journey controller');

  $scope.journeys = JourneyHandler.getJourneys();
})

.controller('JourneyDetailController', function($scope, $stateParams, $log) {
  'use strict';

  $log.debug('Activating the journey detail controller');

  $scope.journey = {
    journeyId: 0,
    journeyStart: new Date()
    };
})

The app.js defines the states as:

.state('tab.journeys', {
  url: '/journeys',
  views: {
    'tab-journeys': {
      templateUrl: 'templates/tab-journeys.html',
      controller: 'JourneysController'
    }
  }
})

.state('tab.journey-detail', {
  url: '/journey',
  views: {
    'tab-journey-detail': {
      templateUrl: 'templates/journey-detail.html',
      controller: 'JourneyDetailController'
    }
  }
});

$urlRouterProvider.otherwise('/tab/dash');

and the relevant templates are: tab-journeys.html

<ion-view view-title="My Journeys">
<ion-content>
<ion-list>
  <ion-item class="item-remove-animate item-avatar item-icon-right" ng-repeat="journey in journeys" type="item-text-wrap" href="#/tab/journey">
    <h2>{{journey.journeyId}}</h2>
    <p>{{journey.routeId}}</p>
    <i class="icon ion-chevron-right icon-accessory"></i>

    <ion-option-button class="button-assertive">
      Delete
    </ion-option-button>
  </ion-item>
</ion-list>
</ion-content>
</ion-view>

and journey-detail.html

<ion-view view-title="Journey Detail">
<ion-content>
<p>This is where the journey details will go.</p>
</ion-content>
</ion-view>

There are no errors in the console so I really can't understand why it's not working.

Answer 1

When I encountered this same problem, I discovered that the error occurs because the controller didn't load.

Comment the controller in the state declaration and see if it works. You will need to check the controller.