Пользовательская директива AngularJS с xeditable: не работает в первый раз, но работает позже

Question

При создании приложения AngularJS я использую xeditable, чтобы позволить пользователю редактировать таблицу, строка за строкой (как описано здесь: xeditable).

Логика кнопок " Редактировать, удалить и отменить", будучи немного громоздкой для реализации в каждой таблице, я создал собственную директиву: sen-edit-row,

Логика кнопок в пользовательской директиве работает хорошо... кроме одного случая.

Когда пользователь нажимает [Добавить], добавляется строка (как в примере с xeditable), и новая строка сразу же редактируется. Или так и должно быть!

В самый первый раз строка не редактируется. Поля ввода не созданы xeditable. Кнопки моей собственной директивы все еще работают.

Но самое странное: 2-й раз, когда пользователь нажимает [Добавить], он просто работает. И тогда это продолжает работать!

(Это сводит меня с ума)

В HTML директива называется так:

    <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>

В JS директива определяется как:

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

И шаблон директивы:

<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>

Я также создал Plunker, который показывает доказательства этого поведения.

Вопрос: Как заставить мою директиву и xeditable работать последовательно, в том числе в первый раз, и активировать сразу, когда строка добавлена ​​в таблицу?

Спасибо!