JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.angularjs.org/1.2.0-rc.3/angular.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script src="http://code.angularjs.org/1.2.0-rc.3/angular-route.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.js"></script>
<div ng-controller="Ctrl">
    <ul ng-repeat="task in tasks">
        <li ng-mouseover="enableEdit(task)" ng-mouseleave="disableEdit(task)">{{task.name}} <span ng-show="task.editable"><a>Edit</a></span>
        </li>
    </ul>
</div>

CSS

transition-duration:0.4s;

JavaScript

(function () {
    angular.element(document).ready(function () {
        var app = angular.module('myApp', []);

        app.controller("Ctrl", function ($scope) {
            $scope.tasks = [{
                name: 'foo'
            }, {
                name: 'bar'
            }];

            $scope.enableEdit = function (item) {
                item.editable = true;
            };

            $scope.disableEdit = function (item) {
                item.editable = false;
            };
        });

        angular.bootstrap(document, ['myApp']);
    });


}());