AngularJS: Scope in ng-repeat

Question

I am trying to ng-include some partials dynamically. I realize there may be other ways to do this, but I want to understand why this way isn't working.

I have a controller defined as so:

auditApp.controllerModule.controller('LayoutCtrl', ['$scope',
    function (scope) {
        scope.index1={
            pages:[
                'views/subpage1.html',
                'views/subpage2.html',
                'views/subpage3.html',
                'views/subpage4.html'
        ]};
    }
]);

If I execute a static version of my code, everything works fine:

<div ng-controller="LayoutCtrl">
    <div class="row" ng-init="pob={pageidx:0}">
        <div class="span1">
            <ul class="nav nav-tabs nav-stacked">
                <li><a ng-click="pob.pageidx=0">0</a></li>
                <li><a ng-click="pob.pageidx=1">1</a></li>
                <li><a ng-click="pob.pageidx=2">2</a></li>
                <li><a ng-click="pob.pageidx=3">3</a></li>
            </ul>
        </div>
        <div class="span11">
            <ng-include src="index1.pages[pob.pageidx]"></ng-include>
        </div>
    </div>
</div>

However, if I try to duplicate this using ng-repeat, it fails silently:

<div ng-controller="LayoutCtrl">
    <div class="row" ng-init="pob={pageidx:0}">
        <div class="span1">
            <ul class="nav nav-tabs nav-stacked">
                <li ng-repeat="n in index1.pages"><a ng-click="pob.pageidx={{$index}}" >{{$index}}</a></li>
            </ul>
        </div>
        <div class="span11">
            <ng-include src="index1.pages[pob.pageidx]"></ng-include>
        </div>
    </div>
</div>

Again, iterating through an array and just using the $index does not make a whole lot of sense in this example, but it's the underlying scope disconnect that is puzzling me. Can anyone advise me?

Langdon · Accepted Answer · 2013-04-23 23:42:01Z

2

ngClick is expecting an Angular Expression. You shouldn't be using interpolation there. It should simply be:

<a ng-click="pob.pageidx=$index">{{$index}}</a>

http://plnkr.co/edit/ZSPdaqR6WrRh9rbP7vUU?p=preview

answered Apr 23, 2013 at 23:42

Langdon

20.1k18 gold badges90 silver badges108 bronze badges

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

1 Comment

Pete Gardner Over a year ago

This is the sound of me smacking my forehead. THANK YOU!

Collectives™ on Stack Overflow

AngularJS: Scope in ng-repeat

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related