Issue with nested links or actions in ember

I met with a situation where I have to add actions for both parent and child tag. For example;

{{#each thread in messageThreads}}
  <div {{bind-attr class=":details-container thread.firstObject.recent:active"}}>
    {{#link-to "student-messages.show" thread.firstObject class="row medium-text message-detail"}}
      <div class="col-md-12 col-xs-12 col-sm-12 message-snippets">
        <div class="row message-content">
          <span class="col-md-11 col-xs-10 col-sm-10 medium-text">
            {{display-html thread.firstObject.body}}
            {{thread.firstObject.subject}}
            {{#if thread.firstObject.isAnnouncement}}
              <span class="view-file-list" {{action 'viewFileList' thread.firstObject.sections.firstObject}}>{{_ "VIEW FILE LIST"}}</span>
            {{/if}}
          </span>
        </div>
      </div>
    {{/link-to}}
  </div>
{{/each}}

viewFileList action which is defined in controller will redirect to another resource(use transitionToRoute). Here I am facing a issue, when I click on viewFileList action it is not redirecting to the corresponded route , instead is redirecting to the parent link(student-messages.show). If I put the "view-file-list" span outside of the {{link-to}} it is working fine.

In my project there are many place where I have to use nested links like this. Can anyone point out the issue with this or suggest any other way to implement this concept.

Thanks in advance.