Take the 2-minute tour ×

I'm trying to find the best way to get an index position within an ngRepeat used with a custom directive. The problem I'm trying to solve is that for each iteration of the ngRepeat, I'd like the option of knowing where I am in the iteration so I can create a custom template based on that index position.

Unless there is a better way of doing this, I'm attempting to do this functionality based on this documentation from directives:

& or &attr - provides a way to execute an expression in the context of the parent scope. If no attr name is specified then the attribute name is assumed to be the same as the local name. Given and widget definition of scope: { localFn:'&myAttr' }, then isolate scope property localFn will point to a function wrapper for the count = count + value expression. Often it's desirable to pass data from the isolated scope via an expression and to the parent scope, this can be done by passing a map of local variable names and values into the expression wrapper fn. For example, if the expression is increment(amount) then we can specify the amount value by calling the localFn as localFn({amount: 22}).


I'm having some difficulty understanding exactly what this statement is telling me. So, what I have tried to do is this...

First the ngRepeat directive being used along with my directive in "testTemplate":

   <li my-attr="test()" my-directive ng-repeat="value in values" class="span2">

Next, my directive defined:

angular.module('myModule', []).directive(
        function() {
            return {

                replace : true,
                transclude : true,
                scope : {
                    test: '&myAttr'

                templateUrl: 'partials/myTemplate.html',

                link : function(scope, element, attrs) {

Now finally, I'm trying to define the "test" function within the controller for the parent template where the directive is being referenced.

function TestTemplateCtrl($scope, testTemplate) {

  $scope.test = function(){
      alert('in test');
  $scope.count = "1";

So the first problem is that my "test" function in the parent is not being executed at all. Maybe I'm not understanding how the test function within the parent controller should be called. Now I'm not actually incrementing yet either, but is the above the correct way I would go about incrementing my count when I do get to that point if I can get the test function to fire?

share|improve this question
Wow I think I was making this more complicated then needed. I can just grab the index within my link function with scope.$parent.$index. I'd still like to know why my "test" function wasn't firing though just for future reference. –  DavidB Jan 3 '13 at 5:15
add comment

2 Answers

up vote 7 down vote accepted

Instead of scope.$parent.$index you might consider passing $index as a directive attribute:

<li my-directive index="{{$index}}" ng-repeat="value in values">


myApp.directive('myDirective', function() {
    return {
        replace: true,
        // transclude: true,
        scope: {
            index: '@'
        template: '<div>testing {{index}}</div>',
        link: function(scope, element, attrs) {
            // ...


share|improve this answer
Good call on this. This is exactly what I was looking to do. –  DavidB Jan 4 '13 at 3:53
Of note: with the '@' syntax, you'll have to use attrs.$observe() if you want to use the index value inside the link function -- see this answer for more info. (You don't need to use $observe() if you are only using the value in a template, like I show in the fiddle.) –  Mark Rajcok Jan 4 '13 at 3:58
add comment

As you pointed out, you can grab the index by using $index.

As why your test function is not firing, you didn't execute it. In your directive's link function you need something like:

share|improve this answer
add comment

Your Answer


