Angularjs unable to resolve returned promise

Question

I have two drop-downs that cascades with the following code but the JSON being returned to the second drop-down is not rendered because the promise returned is not properly resolved

 <div class="row" style="padding-bottom:50px;width:85%;">
    <select data-ng-model="search.astate"  data-ng-options="s.StateID as s.StateName for s in astates" ng-change="agetLGA()">
          <option value="">Filter by state</option>
       </select>
   </div>
    <div class="row" style="width:85%;">
    <select data-ng-model="search.algovt"  data-ng-options="c.StateLGId as c.LGName for c in algovts" data-ng-disabled="!lgovts">
          <option value="">Filter by local govt</option>
       </select>
   </div>

This is the code that is called on change of the first drop down

$scope.agetLGA = function () {
        var stateId = $scope.search.astate;
        $scope.algovts = artFact.getLGA().save({stateId:stateId}, function (response){
            $scope.algovts = response.data;
        });

This is getLGA factory definition

 getLGA: function (stateId) {
            return $resource('/Home/GetLGA/', { stateId: '@stateId' }, { update: { method: 'POST' } });

    }

And the error given is this

Error: [$resource:badcfg] object
http://errors.angularjs.org/1.2.13/$resource/badcfg?p0=array
    at http://localhost:53536/Scripts/angular.js:78:12
    at a.module.factory.f.(anonymous function).p.then.m.$resolved (http://localhost:53536/Scripts/angular-resource.min.js:8:517)
    at deferred.promise.then.wrappedCallback (http://localhost:53536/Scripts/angular.js:11033:81)
    at deferred.promise.then.wrappedCallback (http://localhost:53536/Scripts/angular.js:11033:81)
    at http://localhost:53536/Scripts/angular.js:11119:26
    at Scope.$get.Scope.$eval (http://localhost:53536/Scripts/angular.js:12045:28)
    at Scope.$get.Scope.$digest (http://localhost:53536/Scripts/angular.js:11871:31)
    at Scope.ng.config.$provide.decorator.$delegate.__proto__.$digest (<anonymous>:844:31)
    at Scope.$get.Scope.$apply (http://localhost:53536/Scripts/angular.js:12151:24)
    at Scope.ng.config.$provide.decorator.$delegate.__proto__.$apply (<anonymous>:855:30) 

What could be the problem please, I have tried all I could thing of

Answer 1

In your Factory try this:

return {
    getLGA: $resource('/Home/GetLGA/', {}, { update: { method: 'POST' } });
}

And in your controller:

$scope.agetLGA = function () {
    var stateId = $scope.search.astate;
    $scope.algovts = artFact.getLGA.update({stateId:stateId}, function (response){
        $scope.algovts = response.data;
    }));
};