JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-resource.js"></script>
<section ng-controller="mainController as vm">
  <h1>{{ vm.title }}</h1>
  <ul>
    <li ng-repeat="dragon in vm.dragons track by $index">
      <input ng-model="dragon.name"> 
      <button class="update" ng-click="vm.updateDragon(dragon)">Update</button>
      <button class="delete" ng-click="vm.deleteDragon(dragon)">Delete</button>
    </li>
  </ul>
</section>

SCSS

ul {
  padding: 0;
  list-style: none;
  
  li {
    padding: 5px;
  }
}

input {
  padding: 5px;
}

button {
  padding: 5px;
  color: white;
  background: gray;
  border: none;
  
  &.update{
    background: green;
  }
  &.delete{
    background: red;
  }
}

JavaScript

;(function(angular) {
	angular.module('app', ['ngResource']);
  
  angular.module('app')
  	.factory('dragonsService', dragonsService);
  
	dragonsService.$inject = ['$resource'];

  function dragonsService ($resource) {
  	var res = $resource('https://dragons-api.herokuapp.com/api/dragons/:slug', { slug: '@slug' }, {
    update : {
      method: 'PUT'
    }
  });
    
    return res;
  }
  
  angular.module('app')
  	.controller('mainController', mainController);
  
	mainController.$inject = ['dragonsService'];

  function mainController (dragonsService) {
  	var vm = this;
    
    vm.title = "Dragons API"
    
    vm.updateDragon = updateDragon;
    vm.deleteDragon = deleteDragon;
    
    function updateDragon (dragon) {
    	dragon.$update(function () {
      	loadDragons();
      });
    }
    
    function deleteDragon (dragon) {
    	dragon.$delete(function () {
      	loadDragons();
      });
    }
    
    function loadDragons () {
    	dragonsService.query(function(dragons) {
        vm.dragons = dragons;
      });
    }
    
    loadDragons();
  }
  
	angular.bootstrap(document.body, ['app']);
})(angular);