Angular Service vs Factory pattern explained

(function () {
  'use strict';
  
angular.module('plunker', [])
       .controller('MainCtrl', MainController)
  
  MainController.$inject = ['dataService', 'dataFactory'];
        
  function MainController (dataService, dataFactory) {
   
    console.dir(dataFactory); //constructor points to an object
    console.dir(dataService); //constructor points to an the function
    dataService.details();
    dataFactory.details();
    
  }      

  angular.module('plunker').factory('dataFactory', dataFactory);
  
  angular.module('plunker').service('dataService', dataService);
  
  
  //Create an object and returning an object. We call a function.
  function dataFactory() {
    var obj = {}, localvar = 10;
    
    obj.name = "Factory";
    obj.details = function () {
      console.log("This is a Factory method");
    };
    return obj;
  }
  
   //Use this keyword. To create an instance it uses new keyword
  function dataService() {
    var localvar = 11;
    
    this.name = "Service";
    this.details = function () {
      console.log("This is a Service method");
    };
  }
  
  
})();


//internally
/*
var instance = dataFactory();
var instance = new dataService();

*/

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.8/angular.js" data-semver="1.4.8"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">
   <input type="text" ng-model="name"/>
    <p>Hello {{name}}!</p>
  </body>

</html>

/* Put your css in here */