How can i highlight a list card item on another view in ionic when navigating? - angularjs

Question

I have a list of unread "comments" in a menu - when i click i want to navigate to the comments group (a card item list), higlight and scroll to its $index.
I navigate to the group of cards like so:
ng-href="#/app/comments/{{comment.group}}#{{comment.id}}"
Using $stateparams I grab the group id comment.group and list all the comments listed like so:
<div class="list card fade" ng-repeat="comment in comments track by comment.id">
<div class="item item-avatar item-button-right item-stable">
<img ng-if="!userInfo.image" src="img/icon.png">
<img ng-if="userInfo.image" ng-src="{{userInfo.image}}">
<span ng-bind-html="userInfo.status"></span><span class="dark">{{userInfo.name}}</span>
<p class="date">{{comment.date | date:'M/dd/yy'}} {{comment.date | date:'h:mma'}}</p>
<button class="button button-clear" ng-if='canDelete' ng-click='deleteComment()'>
<i class="icon ion-ios-trash-outline"></i>
</button>
</div>
<div id="{{comment.id}}" class="item item-text-wrap item-button-right">
<span style="margin-left: 10px;">"{{comment.text}}"</span>
</div>
</div>
I set the id of the item text area to the comment.id
I'm trying to fade in all the cards and highlight comment.id item with the following css/scss:
.fade.ng-enter {
/* standard transition code */
transition: 1.0s linear all;
opacity:0;
}
.fade.ng-enter-stagger {
/* this will have a 100ms delay between each successive leave animation */
transition-delay: 0.4s;
transition-duration: 0s;
}
.fade.ng-enter.ng-enter-active {
/* standard transition styles */
opacity:1;
}
//Higlighting
:target{
-webkit-animation: target-fade 3s 1;
}
#-webkit-keyframes target-fade {
0% {
background-color: rgba(255,0,0,.1) !important;
}
100%{
background-color: rgba(0,0,0,0) !important;
}
}
both the fade and target-fade animations aren't working.
I do not know how to scroll to the index of the card in ionic - I was hoping the # tag would act as an anchor and work its magic...
can anyone help with this?