Angularjs displaying json in Rails - angularjs

Question

I am trying to display a list of my donors - the html is:
<div class="panel">
<header>
<h1> Donor Information </h1>
</header>
<div class="content">
<div ng-app="Donor">
<div ng-controller="DonorCtrl">
<ul>
<li ng-repeat="donor in donors">{{donors.name_last | json}}</li>
</ul>
</div>
</div>
</div>
</div>
My Donor_controller.js is this:
var app;
app = angular.module("Donor", ["ngResource"]);
app.factory("Donors", [
"$resource", function($resource) {
return $resource("/donors", {}, {
update: {
method: "PUT"
}
});
}
]);
app.factory("Donor", [
"$resource", function($resource) {
return $resource("/donors/:id", {
id: "#id"
}, {
update: {
method: "GET"
}
});
}
]);
this.DonorCtrl = [
"$scope", "Donor", "Donors", function($scope, Donor, Donors) {
var donor;
$scope.donor = Donor.query();
$scope.donors = Donors;
$scope.addDonor = function() {};
donor = Donor.save($scope.newDonor)(function() {
return $scope.donors.push(donor);
});
return $scope.newDonor = {};
}
];
I am returning from my rails app via donors/1.json this:
{
"donor": {
"id": 1,
"tools_id": null,
"first_name": "Billy",
"last_name": "Bullard"
}
}
I get a list of dots when I view and it shows this on inspection (repeated):
<li ng-repeat="donor in donors" class="ng-scope ng-binding"></li>
How do I go from the json coming from Rails to the list of names in Angularjs?

Answer 1

You should remove | json from your bind and you want the donor's lastname, not the donors':
<li ng-repeat="donor in donors">{{donor.name_last}}</li>
Update 1
Also, you should have $scope.donors = Donors.query(); in your controller, not $scope.donor = ....