AngularJS model is populated in javascript but empty on the page

Question

I've got this code...

Agencyapp.factory('AgencyData', function ($http, $log) {
return {
    getAgencies: function(successcb){
        $http({ method: 'GET', url: 'http://localhost/MappingServicesWebAPI/api/mapping' }).
        success(function(data){
            successcb(data);
        }).
        error(function(data){
            $log.warn(data, status, headers, config);
        })
    }

}
});

Which gets data from a WebAPI. The $scope.Agencies model gets populated with an AgencyList array. When I try to use that array...

<div ng-controller="AgenciesCtrl">
    <select ng-model="Agencies">
        <option>Select Agency</option>
        <option ng-repeat="A in Agencies" >{{A.AgencyList.AgencyName}}</option>
    </select>
    {{Agencies.AgencyList}}
</div>

It's empty...can someone help me with what I might be doing wrong?

Here's the controller, sorry I thought I included it...

Agencyapp.controller('AgenciesCtrl', function AgenciesCtrl($scope, AgencyData) {

AgencyData.getAgencies().then(function (rtnAgencies) {
    $scope.Agencies = rtnAgencies;

});

});

I tried to post a picture of the populated $scope object but I don't have enough reputation points...

It Looks like this(each indent is a nested object)...

$scope.Agencies
  [prototype]
  AgencyList[]
    [0]
      [prototype]
      AgencyID    -10168
      AgencyName  "#1 Insurance Agency"

If I hard code data...

function AgenciesCtrl($scope, AgencyData) {

$scope.Agencies = [
            {
                AgencyID: 'Test One',
                AgencyName: 'Agency Test 1'
            },
            {
                AgencyID: 'Test Two',
                AgencyName: 'Agency Test 2'
            }];


};

It Works

If I hard code data inside the function call

function AgenciesCtrl($scope, AgencyData) {



AgencyData.getAgencies().then(function (rtnAgencies) {
    $scope.Agencies = [
            {
                AgencyID: 'Test One',
                AgencyName: 'Agency Test 1'
            },
            {
                AgencyID: 'Test Two',
                AgencyName: 'Agency Test 2'
            }];


});


};

It doesn't work

I haven't seen one good example of using data from a web api...all examples I have seen hard code data, what's the point in that?

Can you post your controller? It may be that a $digest cycle never kicked off. — tymeJV
– tymeJV, Commented Oct 7, 2013 at 18:23
I suppose you handle data passed to successcb wrong, but I can't say anything without controller. — lort
– lort, Commented Oct 7, 2013 at 18:58
Any ideas...how do you get a question answered on this site? — TJunky
– TJunky, Commented Oct 9, 2013 at 11:49

kmdsax · Accepted Answer · 2013-10-07 20:50:07Z

1

First, remove ng-model="Agencies" from your <select> element. You dont want to bind your select element to the same object that you are running an ng-repeat on. Try something like <select ng-model="selectedAgency" > instead.

Second, I suggest utilizing angular's deferred API to return a promise, which will then be resolved with the value of the data returned from the server, when it is finished:

Agencyapp.factory('AgencyData', function ($http, $log, $q) {
return {
    getAgencies: function(successcb){
        var deferred = $q.defer();
        $http({ method: 'GET', url: 'http://localhost/MappingServicesWebAPI/api/mapping' }).
        success(function(data){
            deferred.resolve(successcb(data)); //I dont know what successcb() does                
        }).
        error(function(data){
            deferred.reject(data);
            $log.warn(data, status, headers, config);
        })
        return deferred.promise;
    }
};
});

In your controller, you would then do something like this:

  AgencyData.getAgencies().then(function(data) {
     $scope.Agencies = data;
  });

As soon as the getAgencies() function finishes getting the data, the $scope.Agencies object will be updated with the resulting data.

answered Oct 7, 2013 at 20:50

kmdsax

1,3619 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

TJunky Over a year ago

Thanks for the response...I have implemented the changes you suggested but get the same result a populated $scope object that doesn't seem to carry back to the page.

TJunky Over a year ago

Anybody have any ideas for me?

kmdsax Over a year ago

what does successcb do? have you been able to confirm through firebug that the data is indeed being successfully returned in the format you are expecting? What format is the data being returned in, can you provide a screenshot or sample of what the actual returned data looks like?

TJunky Over a year ago

I provided that by editing my original post...I tried to post a picture but I don't have enough reputation points. I took the cbSuccess function out and I get the same results...it was just a call back function.

TJunky Over a year ago

Any ideas...how do you get a question answered on this site?

TJunky · Accepted Answer · 2013-10-24 19:00:25Z

0

It turns out I had my...

<div ng-controller="AgenciesCtrl">
<select ng-model="Agencies">
    <option>Select Agency</option>
    <option ng-repeat="A in Agencies" >{{A.AgencyList.AgencyName}}</option>
</select>
{{Agencies.AgencyList}}
</div>

Inside a that was controlled by a Javascript Library called Slidebox.js. Once I removed Slidebox.js everything worked correctly.

answered Oct 24, 2013 at 19:00

TJunky

491 silver badge7 bronze badges

Collectives™ on Stack Overflow

AngularJS model is populated in javascript but empty on the page

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related