angularjs ui-router nested states new controller not working

Question

I'm stuck with nested states in the ui-router. I'm rendering a page with regions, countries and people per country

The index.html has three regions as link, EMEA APAC and AMER

the part of the index page has:

<a ui-sref="territory({territory: 'amer'})">AMER</a>&nbsp;<a ui-sref="territory({territory: 'emea'})">EMEA</a>&nbsp;<a ui-sref="territory({territory: 'apac'})">APAC</a>

<ui-view></ui-view>

when the link is clicked, the countries are returned by a $http.post action and displayed by /views/countries.html as:

<h1>This is countries</h1>
<br>
Teritory: {{region}}
<div ng-repeat='country in countries'>
    <a ui-sref=".support({country: '{{country}}'})">{{country}}</a ui-sref>
</div>

This is working so far. so I have a.support link on each country, The problem is now, when I click the link. the state is accepted..,cause it is loading the templateURL. but it seems that the controller specified in that state is not loaded: the angularjs code:

$urlRouterProvider.otherwise('/home');
    $stateProvider
        .state('home', {
            url: '/home',
            templateUrl: 'views/home.html',
            controller: 'supportCtrl'
        })
        .state('territory', {
            url: '/territory/:territory',
            templateUrl: 'views/countries.html',
            controller: 'countryController'
        })
        .state('territory.support',{
            url: '/:country',
            templateUrl: 'views/supporter.html',
            controller: 'supportController'
        })
});

the support controller is writing a console.log entry...but nothing happens. the controllers:

supportApp.controller('countryController',['$scope', 'supportService', '$location', '$stateParams', function($scope, supportService, $location, $stateParams){
    
    $scope.fromTerritory = $stateParams.territory;
    $scope.getCountries = function(){
        var countries = supportService.getCountries($scope.fromTerritory);
        countries.then(function(response){
            if(response.data.error){
                $scope.error = true;
                $scope.message = response.data.message;
            }
            else{
                console.log('response OK');
                $scope.region = $scope.fromTerritory;
                $scope.countries = response.data;
            }
        });
    }
    $scope.getCountries();

}]);

supportApp.controller('supportController',['$scope', 'supportService', '$location', '$stateParams', function($scope, supportService, $location, $stateParams){
    console.log('in the supportController');
    var test = function(){
        console.log('supportController country: '+$stateParams.country);
    }
    test();
}]);

I'm probably doing something wrong here. The goal is clicking the country and then displaying names of the people belonging to that specific country.

If it's not clear, I can provide more info where needed. But for now it seems that the controller (supportController) for the nested state (.territory.support) is not running / loaded

thank you!

Answer 1

Ok, I have my answer for now... because I did not use the <ui-view></ui-view> on the supporter.html the controller was not 'needed' and did not load. after adding the the consol.log is showing the log entries.