AgularJSBooks/app/views/authors.template.html

<h2 class="page-header">Athors</h2>
<button class="btn btn-primary pull-right" ng-click="addAuthors()">Add Author</button>
<table class="table table-hover">
    <thead>
        <th>Firstname</th>
        <th>Lastname</th>
    </thead>
    <tbody ng-repeat="author in authors">
        <td><span editable-text="author.firstname" e-form='editableForm' e-ng-model='author.firstname' e-name='firstname'>{{author.firstname || '-'}}</span></td>
        <td><span editable-text="author.lastname" e-form='editableForm' e-ng-model='author.lastname' e-name='lastname'>{{author.lastname || '-'}}</span></td>
        <td class="float-right">
            <span ng-show="!editableForm.$visible">
                <button  class="btn-danger btn-xs pull-right" ng-click="deleteAuthor(author.id)"><i class="glyphicon glyphicon-trash"></i></button>
                <button  class="btn-warning btn-xs pull-right" ng-click="editableForm.$show()"><i class="glyphicon glyphicon-pencil"></i></button>
            </span>
            <form editable-form name="editableForm" ng-show="editableForm.$visible" onaftersave='saveAuthor($data,author.id)' shown='inserted === author'>
                <span>
                        <button type="button" class="btn-danger btn-lg pull-right" ng-disabled="editableForm.$waiting" ng-click="editableForm.$cancel()"><i class="glyphicon glyphicon-remove"></i></button>
                        <button  type="submit" class="btn-warning btn-lg pull-right" ng-disabled="editableForm.$waiting" ng-click=""><i class="glyphicon glyphicon-ok "></i></button> 
                </span>
            </form>
        </td>
    </tbody>
</table>