Angular ng-click does not work in Bootstrap drowdown menu - angularjs

Question

I have some filters based on the Bootstrap 3 dropdown menu, but for some odd reason they do not work in the actual dropdown menu, but if i copy-paste it and place it outside it works fine.
<div ng-app="App" ng-controller="ExerciseCtrl" >
<div class="btn-group" ng-class="{open: open}">
<button type="button" class="btn btn-default dropdown-toggle" ng-click="open=!open">Equipment <span class="caret"></span></button>
<ul class="dropdown-menu">
<li ng-repeat="equipment in equipments">
<a href ng-click="myFilter = {equipment:'{%verbatim%}{{equipment.name}}{%endverbatim%}'}">{%verbatim%}{{equipment.name}}{%endverbatim%}</a>
</li>
</ul>
</div>
<table class="table table-hover" >
<tr><td><strong>Name</strong></td><td><strong>Main muscle</strong></td><td><strong>Equipment</strong></td></tr>
<tr ng-repeat="exercise in exercises | filter:myFilter | orderBy:orderProp">
{%verbatim%}<td>{{exercise.name}}</td><td>{{exercise.main_muscle.name}}</td><td>{{exercise.equipment.name}}</td>{%endverbatim%}
</tr>
</table>
</div>
One menu item looks like following:
<li ng-repeat="equipment in equipments" class="ng-scope">
Dumbbell
</li>
So basically if i pull out the alink and place it before the table it works, but not inside the actual dropdown menu.

Answer 1

myFilter is being set on a child scope created by ng-repeat, and is not visible to your table. Try using an object property, such as my.filter, instead.
$scope.my = {
filter: ''
}
html:
<li ng-repeat="equipment in equipments">
<a href ng-click="my.filter = equipment.name">...</a>
</li>
...
<tr ng-repeat="exercise in exercises | filter:{ name: my.filter} ...
Here is a demo: http://plnkr.co/edit/ogfe7MxRRIovTG9bQCWN?p=preview