ui-router routing 2 different states with different templates

Question

I'm using ui-router 0.2.10. My application has two different templates, index.html & index2.html. I've created an abstract state, and i'm referencing both indexs' in their respective states, The problem is I can access the first route fine, but when I try to access the next route it just keeps defaulting to the first route. The abstract templates live in the same folder.

What am I missing here?

 .config(["$stateProvider", "$urlRouterProvider", function(sp, urp) {

    urp.otherwise("/index1");


    sp.state("index1", {
        abstract:true,
        url: "/index1",
        templateUrl: "index.html" 
    });
    sp.state("index1.id", {
        url: "/id",
        template: "views/partials/index.partial.html",
        controller: function($scope,$state){
            $state.go('index1.id');

        }
    });

    sp.state("index2", {
        abstract:true,
        url: "/index2",
        templateUrl: "index2.html"
    });
    sp.state("index2.id", {
        url: "/id",
        template: "views/partials/index2.partial.html",
        controller: function($scope,$state){
            $state.go('index2.id');

        }
    });

}])

Answer 1

I'm assuming that you're trying to go to an abstract state and that won't work as abstract states will only be activated when you go to a child of that abstract state, i.e. you can't direct go to index1 or index2, so this is not legal:

urp.otherwise("/index1"); it should be: urp.otherwise("/index1/id"); instead.

also why are you going to the states again within their own controller? $state.go('index2.id'); is pointless since by the time that line of code is reached you are already in the state index2.id. I think you meant to put those lines of code inside the controllers of the abstract states! Last bit not least don't forget that your abstract states MUST have a ui-view themselves as they are hosting child states.

See plunk.