ng-click="currentTpl='/inventory.html'" Inside ng-repeat not working

Question

I have a menu list, in which when I do ng-repeat , it is not working, but without ng-repeat it is working.

<div class="reports_header_tabs_holder">
      <span ng-repeat="tab in filters.tabs" ng-class="{'active_tab': tab.href == filters.activeTab }">
      <a ng-click="currentTpl='/{{tab.href}}.html'" >{{tab.title}}</a>
      </span>

Viewability optimization inventory

Fiddle

Please read the comment and try accordingly,

<!-- if you comment the ng-repeat anchor, above line ( <a ng-click="currentTpl='/{{tab.href}}.html'" >{{tab.title}}</a> ), and uncomment the below anchors, it works, -->

Answer 1

The problem is that ngRepeat creates separate scope for each iteration. It means that clicking the link you are setting child scope property currentTpl, which doesn't affect parent one.. Simplest fix is to refer parent scope variable directly:

<span ng-repeat="tab in tabs">
     <a ng-click="$parent.currentTpl = '/' + tab.href + '.html'" >{{tab.title}}</a>
</span>

Another problem is that you should not use {{ interpolation tags inside of ngClick, because this is an expression, you don't have to interpolate tab.href to get its value.

Demo: http://jsfiddle.net/nLC3g/255/