makki makki - 5 months ago 21
AngularJS Question

ui-router nested route controller isn't being called

I am trying to call a controller which should be linked with the

route but it isn't being called. What's wrong in it?

.state("home", {
// Use a url of "/" to set a states as the "index".
url: "/",
templateUrl: APP_CONFIG.baseUrl +
controller: 'MainCtrl'
.state("home.category", {
// Use a url of "/" to set a states as the "index".
url: "c/:categoryId/:categorySlug",
controller: function($stateParams) {


Well, I found a clue from the given documentation of ui-router the says

You can assign a controller to your template. Warning: The controller will not be instantiated if template is not defined.

But I tried to add template and still didn't work, then I saw that my parent route template didn't have <div ui-view></div> (I mistakenly removed it) so when I added it back it worked :), So, to instantiate our child's route controller, we must have <div ui-view></div> in our parent's route template.