ui-router - loading template and childview at the using the same route

Question

I'm new to ui-router and I was hoping that some one could assist me with essentially loading 2 views a from the one route. I was looking at the sample plunk and I was trying to get it to load the child views at the same time as the route but I could not get this plunk to work. I thought that by creating an abstract route and then calling state.go in the child route it would work but I missing something.

Any ideas appreciated.

        controller: function($scope){
            $state.go('route1.list');
            $scope.items = ["A", "List", "Of", "Items"];
          }

Answer 1

The error you get precisely points out the issue, you've defined route1 to be abstract and that's fine, but you can't go a to an abstract state, abstract states are only run when you navigate to a child state of that abstract state, so you must go to a child state, so change ui-sref="route1" to ui-sref="rout1.list":

<li><a ui-sref="route1.list">Route 1</a></li>

and also inject $state into route1.list's controller:

.state('route1.list', {
              url: "/list",
              templateUrl: "route1.list.html", //child view
              controller: function($scope,$state){
                $state.go('route1.list');
                $scope.items = ["A", "List", "Of", "Items"];
              }
          })

See working plunk.