AngularJS:在视图中重复ng之后无法访问范围变量

我已经为选项卡创建了一个Angular JS脚本，并尝试在视图中访问下面的范围变量。但是，没有成功。 Tab click工作正常，但以后无法打印selectedIndex变量。请帮忙

这是我认为的代码：

<nav id="App1" ng-app="navTab" ng-controller="NavTabController">
  <a href="#" ng-repeat="item in items" ng-class="{'selected-class-name':$index == selectedIndex}" ng-click="itemClicked($index)">{{item.product_name}}</a>
</nav>
{{selectedIndex}}

<script>
  var navTabModule = angular.module("navTab", [])
  navTabModule.controller("NavTabController", function($scope) {
    $scope.items = [
      {product_name: "dashboard"},
      {product_name: "contacts"},
      {product_name: "appointments"},
      {product_name: "todos"},
      {product_name: "transactions"},
      {product_name: "items"},
      {product_name: "calendar"},
      {product_name: "users"},
      {product_name: "reports"}
    ];
    $scope.selectedIndex = 0;
    $scope.itemClicked = function($index){
      $scope.selectedIndex = $index;
    }
  });
</script>

{{selectedIndex}}

这是有角度的脚本：

<nav id="App1" ng-app="navTab" ng-controller="NavTabController">
  <a href="#" ng-repeat="item in items" ng-class="{'selected-class-name':$index == selectedIndex}" ng-click="itemClicked($index)">{{item.product_name}}</a>
</nav>
{{selectedIndex}}

<script>
  var navTabModule = angular.module("navTab", [])
  navTabModule.controller("NavTabController", function($scope) {
    $scope.items = [
      {product_name: "dashboard"},
      {product_name: "contacts"},
      {product_name: "appointments"},
      {product_name: "todos"},
      {product_name: "transactions"},
      {product_name: "items"},
      {product_name: "calendar"},
      {product_name: "users"},
      {product_name: "reports"}
    ];
    $scope.selectedIndex = 0;
    $scope.itemClicked = function($index){
      $scope.selectedIndex = $index;
    }
  });
</script>

var navTabModule=angular.module（“navTab”，[]）
控制器（“NavTabController”，函数（$scope）{
$scope.items=[
{产品名称：“仪表板”}，
{产品名称：“联系人”}，
{产品名称：“约会”}，
{产品名称：“todos”}，
{产品名称：“交易”}，
{产品名称：“项目”}，
{产品名称：“日历”}，
{产品名称：“用户”}，
{产品名称：“报告”}
];
$scope.selectedIndex=0；
$scope.itemClicked=函数（$index）{
$scope.selectedIndex=$index；
}
});

您正试图在

nav

元素之后访问作用域外部的变量

将绑定放在作用域内，或将控制器移动到外部元素（使作用域更宽），它将工作：

<nav id="App1" ng-app="navTab" ng-controller="NavTabController">
    <a href="#" ng-repeat="item in items" ng-class="{'selected-class-name':$index == selectedIndex}" ng-click="itemClicked($index)">{{item.product_name}}</a>
    {{selectedIndex}}
</nav>

{{selectedIndex}}

或

{{selectedIndex}}