ui-sref in parent div overriding all nested links

We have a series of notifications and want to make the overall item clickable to the related item. This has been implemented using ui-sref and functions correctly. However, within that, there are to be a series of nested links that go to other relevant information. The problem at the moment is this parent ui-sref overrides all of these links. I've tried implementing these nested links as standard anchor and ui-sref but it has the same effect. So the hyperlink shows correctly, and when clicking on it, it goes to it for a split second, then reverts back to the ui-sref link.

Here is a code example:

<div class="NotificationItemBalanced">
    <div class="notificationItem" ui-sref="community.act({slug: slug, id: id})">
        <div class="messageBodyWrapper">
            <span class="messageText"><strong><a ui-sref="user.posts({username: username})"></a></strong> commented on your post</span>
        </div>
    </div>
</div>

Is this related to the ui-sref or is there a specific setting in the routes to fix this?

Thanks