I have successfully created a list card with 2 icons in each row. However, I am facing a challenge in making these icons clickable without disrupting the layout of the list. I attempted to add an ng-click to the icon element, but it did not work as expected. Additionally, surrounding the icons with a div caused me to lose the original layout of the list.
<div class="list card">
<div ng-repeat="destination in destinations | isActive">
<div class="item item-divider">
<span>{{title}}</span>
</div>
<a href="#" class="item item-icon-left item-icon-right item-balanced">
<i class="icon ion-ios-home"></i>
<div>
<div>{{text1}}</div>
<div><b>{{text2}}</b></div>
<div>{{text3()}}</div>
<div>{{text4()}}</div>
</div>
<i class="icon ion-ios-filing"></i>
</a>
</div>
</div>
My goal is to maintain the current layout with the two icons positioned on the left and right sides.