JSFiddle - React, Tailwind, and code Playground

HTML

<html ng-app="myApp">
  <head></head>
  <body>
    <section ng-controller="AppCtrl">
      <h1>Hello, {{name}}</h1>
      <div>
        <label for="name">My Name is</label>
        <input name="name" ng-model="name" type="text"/>
      </div>
      <br/>        
      <button ng-click="reverseNameService()">Reverse Name via Service</button>
      <button ng-click="reverseNameFactory()">Reverse Name via Factory</button>
    </section>
  </body>
</html>

JavaScript

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

app.controller( 'AppCtrl', function AppCtrl($scope, nametrickService, nametrickFactory) {
  $scope.name = 'Guest';
  $scope.reverseNameService = function() {
    $scope.name = nametrickService.reverse($scope.name);  
  };
  $scope.reverseNameFactory = function() {
    $scope.name = nametrickFactory.reverse($scope.name);  
  };
});

app.service('nametrickService', function() {
  this.reverse = function(name) {
    return name.split("").reverse().join("");
  };
});

app.factory('nametrickFactory', function() {
  return {
    reverse : function(name) {
      return name.split("").reverse().join("");
    }
  }
});