Clicking on <a> in a ng-repeat table. Protractor E2E-test angular

Question

I have this table

<table class="table">
      <thead>
      <tr>
        <th class="col-sm-5">Actions</th>
        <th class="col-sm-5">Title</th>
        <th class="col-sm-2">Saved</th>
      </tr>
      </thead>
      <tbody>
      <tr ng-repeat="calc in calculations">
        <td>
          <a class="btn btn-default btn-sm" ng-click="removeCalculation(calc.calcId)">
            <i class="fa fa-trash-o"></i>
          </a>
          <a class="btn btn-default btn-sm" href="#">
            <i class="fa fa-bar-chart-o"></i>
          </a>
          <a class="btn btn-default btn-sm" ng-href="#/user/{{user.userId}}/calculation/{{calc._id}}">
            <i class="fa fa-folder-o"></i>
          </a>
          <a id="copyCalcButton" class="btn btn-default btn-sm" ng-click="copyCalculation(calc.calcId)">
            <i class="fa fa-copy"></i>
          </a>
        </td>
        <td>{{calc.title}}</td>
        <td>{{calc.savedAt}}</td>
      </tr>
      </tbody>
    </table>

I want to e2e my copyCalculation-feature. So first I want to check my length of my array:

var nrOfCalc =  browser.element.all(by.repeater('calc in calculations')).count();

The I'd like to press a the first item in my table and then check if there is one more item in m y array.

How do I click on the first item in my table?

I tried something like this but I got stuck.

var firstRowIn;
browser.findElements(protractor.By.tagName('tr')).then(function(rows){
  firstRow = rows[0];
});

Some pseudo code:

firstRow...click('on the id="copyCalc")

Appreciate any help!

Answer 1

Try this:

element(by.repeater('calc in calculations').row(0)).$('#copyCalc').click()

or

element(by.repeater('calc in calculations').row(0)).element(by.css('#copyCalc')).click()

Answer 2

Andre's answer is close. You just need to use get() instead of row():

element(by.repeater('calc in calculations').get(0)).$('#copyCalc').click()