var app = angular.module('plunker', ['ngResource']);
    
   
    app.factory('NameResource', function($resource) {
    
      var url = 'data.json';
      var res = $resource(url, null, {
        
        query: {
          method: 'GET',
          isArray: true,
          transformRequest: [],
          transformResponse: function(data, headersGetter) {
            var items = angular.fromJson(data);
            var models = [];
      
      			function Person(config) {
      				this.name = config.name;
      			}
      
      			Person.prototype.sayHello = function () {
      				// the person says hello
      			}
      
            angular.forEach(items, function(item) {
              models.push(new Person(item));
            });
            console.log("models: ", models);
            return models;
          }
        }
      });
      return res;
    });
    
    app.controller('MainCtrl', function($scope, NameResource) {
      NameResource.query()
        .$promise.then(function (data) {
          $scope.names = data;
          // sayHello is actually undefined! because $scope.names[0] is
          // an instance of Resources and not Person
          $scope.names[0].sayHello();
        });
    });
<!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.3.x" src="https://code.angularjs.org/1.3.14/angular.js" data-semver="1.3.14"></script>
    <script data-require="angular-resource@1.3.x" data-semver="1.3.14" src="http://code.angularjs.org/1.3.14/angular-resource.js"></script>

    <script src="app.js"></script>
  </head>

<body ng-controller="MainCtrl">
  Hello.
  <ul>
    <li ng-repeat="n in names">
      {{n.name}} 
      
    </li>
  </ul>

  
</body>

</html>
/* Put your css in here */

[
  {
    "name": "john"
  },
  {
    "name": "mary"
  },
  {
    "name": "jane"
  }
]