ng repeat start end demo

Inserting HTML into an AngularJS ng-repeat table to show a edit form.

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="container ng-cloak" ng-app="app" ng-controller="DemoController as vm">

    <div class="row">

        <div class="col-xs-12">

            <p>
                Demo to try answer a <a href="http://stackoverflow.com/questions/40917923/inserting-html-into-an-angularjs-ng-repeat-table" target="_blank">stackoverflow question</a>.
            </p>

            <p>
                <button type="button" class="btn btn-warning" ng-click="vm.loadData()">Load data</button>
                <button type="button" class="btn btn-success" ng-click="vm.add()">Add new item</button>
            </p>

            <table class="table table-striped">

                <thead>
                    <tr>
                        <th>Id</th>
                        <th>Name</th>
                        <th>Date</th>
                        <th>Status</th>
                        <th>&nbsp;</th>
                    </tr>
                </thead>
                <tbody>
                    <tr ng-if="!item.editMode" ng-repeat-start="item in vm.items track by item.id" onclick="alert(item.id)">
                        <th ng-bind="::item.id"></th>
                        <td ng-bind="::item.name"></td>
                        <td ng-bind="::item.date | date: 'mediumDate'"></td>
                        <td ng-bind="::item.status"></td>
                        <td>
                            <button type="button" class="btn btn-primary" ng-click="vm.edit(item)">Edit</button>
                            <button type="button" class="btn btn-danger" ng-click="vm.delete(item)">Delete</button>
                        </td>
                    </tr>
                    <tr ng-repeat-end ng-if="item.editMode">
                        <td colspan="5">
                            <form ng-submit="vm.saveChanges(item)">
                                <!-- TODO: make the form an angular...

JavaScript

angular.module("app", [])
    .controller("DemoController", DemoController);

function DemoController() {

    var nextId = 1;
    var vm = this;

    vm.items = [];
    vm.currentItem = {};
    vm.loadData = loadData;
    vm.add = add;
    vm.edit = edit;
    vm.delete = deleteItem;
    vm.saveChanges = saveChanges;
    vm.cancelEdit = cancelEdit;

    function loadData() {
        var items = vm.items;

        for (var i = nextId; i <= nextId + 4; i++) {
            items.push({
                id: i,
                name: "item " + i,
                date: new Date(2016, i, 1),
                status: getStatus(i)
            });
        }

        nextId += 5;
    }

    function add() {
        var item = {
            id: nextId,
            name: "",
            date: new Date(),
            status: "created",
            creationMode: true
        };
        nextId++;
        vm.items.push(item);
        edit(item);
    }

    function edit(item) {
        delete item.edit;
        item.edit = angular.copy(item);
        item.editMode = true;
    }

    function deleteItem(item) {
        var idx = vm.items.indexOf(item);
        vm.items.splice(idx, 1);
    }

    function cancelEdit(item) {
        item.editMode = false;
        delete item.edit;

        if (item.creationMode) {
            var idx = vm.items.indexOf(item);
            vm.items.splice(idx, 1);
        }
    }

    function saveChanges(item) {
        var idx = vm.items.indexOf(item);
        var value = angular.copy(item.edit);
        value.date = new Date(value.date);
        vm.items[idx] = value;

        delete value.creationMode;
    }

    function getStatus(code) {
        var status = code % 3;
        if (status === 0) return "created";
        if (status === 1) return "updated";
        if (status === 2) return "deleted";
    }

}