JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.js"></script>
<div ng-app="demoApp">
  <div ng-controller="LinksCtrl as $ctrl">
    <h1>Links</h1>
    <ul class="content">
      <li ng-repeat="link in $ctrl.links">
        <a ng-href="{{link.url}}" ng-if="!link.$editing" ng-bind="link.url"></a>
        <input ng-model="link.url" edit-action="$ctrl.edit({{$index}})" ng-if="link.$editing">
        <a class="pull-right" href="javascript:;" ng-click="$ctrl.editing($index)">
            Edit
        </a>
      </li>
    </ul>
  </div>
</div>

CSS

.pull-right {
  float: right !important;
}

.content {
  max-width: 350px;
}

body {
  margin: 40px auto;
  max-width: 650px;
  line-height: 1.6;
  font-size: 18px;
  color: #444;
  padding: 0 10px
}

h1,
h2,
h3 {
  line-height: 1.2
}

JavaScript

var app = angular.module('demoApp', []);

app.directive('editAction', function() {
  return {
    restrict: "A",
    link: function($scope, element, attrs) {
      element[0].focus();
      element.prop("onblur", function() {
        var action = $scope.$eval(attrs.editAction);
        action(element[0].value);
      });
    }
  };
});

app.controller('LinksCtrl', function() {
  var ctrl = this;
  ctrl.links = [{
    url: 'https://www.google.com/',
  }, {
    url: 'https://duckduckgo.com/'
  }];

  ctrl.editing = function(index) {
    ctrl.links[index].$editing = true;
  };

  ctrl.edit = function(index) {
    var link = ctrl.links[index];
    return function(value) {
      console.log(link, value);
      link.$editing = false;
    };
  };
});