AngularJS: unable to access scope variable after ng-repeat in view

Question

I have created an Angular JS script for tabs and trying to access a scope variable below in View. But, no success. Tab click is working fine, but unable to print selectedIndex variable later. Please help.

This is the Code in my View:

<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}}

And here is the Angular Script:

<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>

J. Bruni · Accepted Answer · 2013-11-02 11:42:10Z

2

You are trying to access the variable outside of the scope, after the nav element.

Put the binding inside the scope, or move the controller to an outer element (make the scope broader), and it will work:

<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>

or

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

answered Nov 2, 2013 at 11:42

J. Bruni

20.5k13 gold badges80 silver badges93 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

AngularJS: unable to access scope variable after ng-repeat in view

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related