Here is the data I am working with:
$scope.allNames = [
"A": [ { "name": "a1" }, { "name": "a2" }, { "name": "a3"} ],
"B": [ { "name": "b1" }, { "name": "b2" }, { "name": "b3"} ],
"C": [ { "name": "c1" }, { "name": "c2" }, { "name": "c3"} ],
]
<div ng-repeat="(letter, names) in allNames | filter:myFilter">
<h4>{{ letter }}</h4>
<ul ng-repeat="n in names">
<li>{{ n.name }}</li>
</ul>
</div>
// when a <span> tag is clicked, filter and show only names that correspond to that letter.
<span ng-click="myFilter = 'A'></span>
<span ng-click="myFilter = 'B'></span>
<span ng-click="myFilter = 'C'></span>
I am attempting to display only the names that have the $key value of the clicked letter or start with that letter. However, I am struggling with filtering based on the array index.