Angular Factory vs Service

by johnwun

HTML

<script src="http://code.angularjs.org/1.1.3/angular.js"></script>
<body ng-app="myApp" >    
<section  ng-controller="AppCtrl">
      <h1>Hello, {{cfg.name}}</h1>
      <div>
        <label for="name">My Name is</label>
        <input name="name" ng-model="cfg.name" type="text"/>
      </div>
      <br/>        
      <button ng-click="reverseNameService()">Reverse Name via Service</button>
      <button ng-click="reverseNameFactory()">Reverse Name via Factory</button>
    <div>{{modal}}</div>
    </section> 
</body>

JavaScript

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

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

app.service('nametrickService', function($compile) {
  this.reverse = function(scope) { 
      var html = $('#modal').html('{{cfg.name}} is <div>'+name+'</div>');
      return $compile(html,scope);
  };
});

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