angular, setting dynamic tabindex with a custom directive

Question

This is embarassing. I can't figure out how to do something appearingly trivial.

tr.row(ng-repeat="user in users")
  td
    div(input-inline-edit="user.name" tabindex="{{ $index*10 + 1 }}")
  td
    div(input-inline-edit="user.surname" tabindex="{{ $index*10 + 2 }}")
  td
    div(tabindex="{{ $index*10 + 3 }}")

As I have rows, I need to be able to traverse the tabindex by row. Thus I thought best is to have the first row 1,2,3,4 the next 11,12,13,14 then 21,22,23,24

etc.

I am so embarassed I haven't been able to do this, the above code does not work, I tried

{{$index *10 + 1}}

or {{getIndex($index, 1)}}") with in the controller:

$scope.getIndex = function(index,i) {
      return index*10 + i;
    }

and countless other combinations...I can't believe I haven't achieved to do something seemingly simple

EDIT: OK, turns out I was greedy with info. I have an own directive for inline editing, "input-inline-edit". I have edited the code accordingly above. So if I have that directive, the tabindex does NOT work, but if I have a normal div (the third in the above example) it DOES!!! So for the first two I get tabindex=null, for the third I get a valid number. I am baffled.

Answer 1

THIS IS EASY. No need to overcomplicate it. Simply give each of the repeated elements the SAME tabindex. Users will still be able to tab through them just as before.