Custom AngularJS directive with xeditable: doesn't work first time, but works afterward

Question

Building an AngularJS application, I'm using xeditable to allow the user to edit a table, row per row (as described here: xeditable).

The Edit, Remove and Cancel button logic being a bit cumbersome to implement in each table, I created a custom directive: sen-edit-row.

The logic of the buttons in the custom directive works well... except in one case.

When the user clicks [Add], a row is added (just like in xeditable's example), and the new row is immediately editable. Or it should!

The very first time, the row is not editable. The input fields are not created by xeditable. The buttons of my own directive still work.

But the most bizarre thing is: the 2nd time the user clicks [Add], it just works. And then it keeps working!

(this is driving me nuts)

In the HTML, the directive is called this way:

    <tr ng-repeat="access in denyAccessTable">
      <td class="col-md-4"><div editable-text="access.user" e-form="rowForm">{{ access.user }}</div></td>
      <td class="col-md-4"><div editable-text="access.host" e-form="rowForm">{{ access.host }}</div></td>
      <td class="col-md-2"><div editable-text="access.mode" e-form="rowForm">{{ access.mode }}</div></td>
      <td class="col-md-2"><div sen-edit-row save="saveDenyAccess()" remove="removeDenyAccess($index)" shown="access == newDenyAccess"></div></td>
    </tr>

In the JS, the directive is defined as:

angular.module("app", ["xeditable"]).directive("senEditRow", [function() {
return {
    restrict: "A",
    templateUrl: "sen-edit-row.html",
    scope: {
        save: "&",
        remove: "&",
        shown: "="
    },
    link: function(scope, element, attrs) {
    }
}
}])

And the template of the directive:

<div style="white-space: nowrap">
    <form class="form-inline" editable-form name="rowForm" onaftersave="save()" ng-show="rowForm.$visible" shown="shown">
        <button type="submit" class="btn btn-primary" ng-disabled="rowForm.$waiting">Save</button>
        <button type="button" class="btn btn-link" ng-disabled="rowForm.$waiting" ng-click="shown ? remove() : rowForm.$cancel()">Cancel</button>
    </form>

    <!-- Buttons to edit and remove -->
    <div ng-hide="rowForm.$visible">
        <a href="" ng-click="rowForm.$show()" ng-hide="showDeleteButton"><span class="glyphicon glyphicon-edit" style="margin-right: 5px;"></span>Edit</a>
        <a href="" ng-click="showDeleteButton = true" ng-hide="showDeleteButton"><span class="glyphicon glyphicon-trash" style="margin-left: 10px; margin-right: 5px;"></span>Remove</a>
        <button class="btn btn-danger" ng-click="remove()" ng-show="showDeleteButton">Remove</button>
        <button class="btn btn-link" ng-click="showDeleteButton = false" ng-show="showDeleteButton">Cancel</button>
    </div>
</div>

I also created a Plunker that shows evidence of this behavior.

Question: How do I make my directive and xeditable work consistently, including the first time, and activate immediately when a row is added to the table?

Thank you!