Pass a input field value into angularjs $resource undefined and error shows unknown scope provider

Question

 <script src="/library/angularjs/1.2.0-rc.3/angularjs.js"></script>
<script src="/library/angularjs/1.2.0-rc.3/angular-route.js"></script>
<script src="/library/angularjs/1.2.0-rc.3/angular-resource.js"></script>
<script>
var app= angular.module('myApp', ['ngRoute', 'ngResource']);
app.factory('Greeter', ['$scope' , '$resource',function($scope,$resource){
  return $resource(
    'http://adam.shopkeeper.tekserve.com/awh/ngresource/processor.php',
    {
      myvar:$scope.inputName,
      callback: 'JSON_CALLBACK'

    },
    {
      query: {method:'GET',isArray:true}
    });
}]);

app
.controller('MyCtrl', ['$scope', 'Greeter',
  function($scope,Greeter){
  /*alert("yes");*/
  $scope.greet = function(){
    //alert("greetttt");
    alert("before greeeter"+$scope.inputName);
    Greeter.query({inputName:$scope.inputName}, function(response){
      alert(response[0].myCodeId);
      $scope.output=response[0].myCodeId;
    });
  };
}]);
</script>
<div ng-app="myApp">
  <div ng-controller="MyCtrl">
  Your name:
    <input type="text" ng-model="inputName" name="myInput" value="World"/>
    <button ng-click="greet()">greet</button>

  
  <div>
  Test Output Here

    {{output}}

  </div>
  </div>
</div>

The php file expect to return a single array item (i.e. item[0]), But that was not the problem. Because the $scope seems is not recognized for the inputName field, which I made it a model (though I am not sure if its the right thing to do). The error message will show below:

Error: [$injector:unpr] Unknown provider: $scopeProvider <- $scope <- Greeter

I wonder where do I get it wrong?

Answer 1

http://plnkr.co/edit/CKgWrson3IbMugRKdX5p?p=preview

A few problems that I fixed that others pointed out in the comment.

Remove $scope from factory. Here you are getting a generic $scope object but not the actual scope. You will get that in the controller. When you call angular resource with query() the first argument is already the param. But you can specify the common params like you did before.

function($resource) {
  return $resource('mocked-resource.json', {
    callback: 'JSON_CALLBACK'
  }, {
    query: {
      method: 'GET',
      isArray: true
    }
  });

Hope this helps.