Hide image if item in ng-repeat is last - angularjs

Question

I have the following code:
<li class="child-item" role="menuitem" ng-show="isSubMenu" ng-repeat="sublink in subLinks" ng-class="{'last' : $last && setLastElemFlag($last) || false}" ng-click="stopPropagation()">
<img id="child-item-bullet" /><span class="sub-child-span">{{sublink.name}}</span>
<img id="child-dotted-lines-bottom" ng-hide="isLastElement"/>
<img id="child-dotted-lines-bottom-2" ng-hide="isLastElement" />
</li>
Below is my setLastElemFlag function:
$scope.setLastElemFlag = function (value) {
alert(value);
$scope.isLastElement = value;
}
What I'm trying to do is I want to hide child-dotted-lines-bottom and child-dotted-lines-bottom-2 once the item in ng-repeat is the last one. But instead of hiding only the last pair, the above code hides all instances of the image.
To make things much clearer, this is what I want to achieve:
but instead I got this:
What's wrong with my code?
Thanks.

Answer 1

Try it like that, using $last:
<li class="child-item" role="menuitem" ng-show="isSubMenu" ng-repeat="sublink in subLinks" ng-class="{'last' : $last && setLastElemFlag($last) || false}" ng-click="stopPropagation()">
<img id="child-item-bullet" /><span class="sub-child-span">{{sublink.name}}</span>
<img id="child-dotted-lines-bottom" ng-hide="$last"/>
<img id="child-dotted-lines-bottom-2" ng-hide="$last" />
</li>
Here are docs.