JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css">
<div class="container" ng-app="todo">
		<h1>TODO List <small>with inplace editing</small></h1>
		<div ng-controller="todoCtrl">
			<form ng-submit="add()">
				<input type="text" class="form-control" placeholder="New task..." ng-model="newTodo">
				<button class="btn btn-primary">Add</button>
			</form>
			<ul>
				<li ng-repeat="todo in todos">
					<span ng-click="editing = true" ng-hide="editing">{{todo.text}}</span>
					<span ng-show="editing">
						<input type="text" class="form-control" ng-model="todo.text" ng-blur="editing = false" ng-required>
						<a data-ng-click="editing = false" class="glyphicon glyphicon-ok"></a>
					</span>
				</li>
			</ul>
		</div>
        <div class="alert alert-info">
            <p>Click in the TODO item to edit</p>
        </div>
	</div>

CSS

input[type='text'] { 
    width: 400px !important;
    display: inline !important; 
}

ul {
    padding: 20px 0;
    list-style-position: inside;
}

ul li a { cursor: pointer; }

JavaScript

var app = angular.module('todo', []);
		app.controller('todoCtrl', function($scope) {

			$scope.todos = [
				{text: "First task"}
			];

			$scope.add = function() {
				if ($scope.newTodo && $scope.newTodo != '') {
					$scope.todos.push({
						text: $scope.newTodo
					});
					$scope.newTodo = '';
				}
			}

		});