Angular ui-router redirects back to parent state with nested views

Question

I have a router in Angular:

var scenarioManagementModule = angular.module( 'scenarioManagementModule', ['ngResource', 'scenarioModule'])
.config(['$stateProvider', '$urlRouterProvider',
  function( $stateProvider, $urlRouterProvider){
    $stateProvider.state( 'scenario_management', {
        url:         '/scenario_management',
        templateUrl: 'index.html',
        controller:  function( $scope, $state ) {
            $state.transitionTo('scenario_management.scenarios', { reload: true, inherit: false, notify: true });
        }
    });

    $stateProvider.state( 'scenario_management.scenarios', {
        url:         '/scenarios',
        templateUrl: '/scenarios.html',
        controller:  'ScenarioListController',
        resolve:     {
            scenarios_data:  function( $stateParams, Scenario ){
                return Scenario.list();
            }
        }
    });

    $stateProvider.state( 'scenario_management.scenarios.create', {
        url:            '/create',
        templateUrl:    '/scenario.create.html',
        controller:     'ScenarioCreateController',
    });
}]);

My views are set up correctly. All parent templates have their ui-views at the right place, and when I try to access the create page by pasting the url in the browser, it works perfectly.

However, when I programmatically try to invoke the create state with the following code, something strange happens:

$state.transitionTo('scenario_management.scenarios.create', $stateParams, { reload: true, inherit: false, notify: true });

Through console.log, I can see the create state being loaded as desired, however when this state finishes loading, immediately afterwards its parent state starts loading again. As a result, the create state disappears again. And also according to the browser's url, I am now in the parent state again.

Am I doing something wrong? Can someone tell me what's going on, and how can I make sure that the create state stays loaded in?

Answer 1

If you don't want load this state properly you can use abstract: true.