Html 无链接的angularjs路由

我有两个问题。
首先，my test.html没有从他的控制器“看到”产品数组。
我不知道为什么，我已经用routing.config.js中的html连接了控制器

var myapp = angular.module('myapp', ["ui.router", "ngAnimate"]);

myapp.config(function($stateProvider, $urlRouterProvider){    
  $stateProvider
      .state("foo", {
          url: "/foo",
          templateUrl:'start.html'
      })
      .state("test", {
          url: "/test",
          templateUrl: 'test.html',
          controller:'product-controller',
          parent:'foo'
      })

  $urlRouterProvider.otherwise("/foo");
})

myapp.controller('navCtrl', function($scope, $state){

  $scope.navigateTo = function(target){
     $state.go(target);
  }
});

我想要的第二件事是，test.html将被激活，而无需单击链接。
如果已加载主页，则也应加载test.html。
最后我想删除

，但结果应该是一样的。 （foo和下拉列表）

我已经做了一个调查，你可以从中看出问题所在

我唯一的解决方案是在routing.config.js中集成test.controller.js，在start.html中集成test.html。
但我希望避免这种情况，因为这会使代码更加混乱

我还查看了ui路由器文档，但它对我不起作用

    .state("foo.test", {
          url: "/test",
          templateUrl: 'test.html',
          controller:'product-controller',
          parent:'foo'
      })

---

我希望有人有一个想法。。。谢谢

我会接受@charlietfl的建议，仔细阅读嵌套视图。除此之外，您的PRUNKR中还有一些错误：

忘记在

index.html

忘记将

产品选择

模块注入

myapp

（这样它可以解析相应的控制器）

忘记将

ngModel

添加到

test.html

中的select元素，以便数据绑定按预期工作

---

下面是正确填充select控件后的更新。

阅读ui路由器文档并查看有关嵌套视图的演示