ng-repeat and Data from Service - Possible reference Issue? - angularjs

Question

I'm very new to AngularJS. This is my first foray into any sort of JS, so I apologize if I've butchered anything.
Here's a brief overview of what I'm trying to do.
The user inputs a term to search, and I get the information from Twitter. The tweets are displayed with an ng-repeat (making my issue MORE frustrating). The user checks which tweets he/she would like to add to a "cart". Ipush tweets which are selected onto my service's array ("shoppingCart" inside the cart service).
I then click "Add to cart" to transfer to a new page (results.html) where I would like to display what the user selected.
Note: For our purposes here, I've skipped this and hardcoded the results.
This is where it all breaks down. I can console print the array to make sure the service is received by the next controller, but I can't get ng-repeat to work.
I have absolutely no clue what I've messed up here. I'm still very new to Angular so it's likely I've made a dumb mistake. I've tried to read through a docs and have checked out egghead.io videos. Unfortunately I just can't put two and two together.
Here is the service with the array hardcoded:
myApp.service('cart', function Cart($rootScope) {
var self = this;
var shoppingCart = [{
"created_at": "Wed, 17 Apr 2013 17:52:42 +0000",
"from_user": "LopezCarlosB",
"from_user_id": 244705286,
"from_user_id_str": "244705286",
"from_user_name": "carlos lopez",
"geo": null,
"id": 324581196224938000,
"id_str": "324581196224937984",
"iso_language_code": "en",
"metadata": {
"result_type": "recent"
},
"source": "",
"text": "#Medicencaballo #ponnyloca AHHH AHH LESLEEEEEY ASD SIGYGIS",
"to_user": "Medicencaballo",
"to_user_id": 202598647,
"to_user_id_str": "202598647",
"to_user_name": "Axel Manrique",
"in_reply_to_status_id": 324580938027765760,
"in_reply_to_status_id_str": "324580938027765760"
}, {
"created_at": "Wed, 17 Apr 2013 17:52:35 +0000",
"from_user": "WhatNowTweeting",
"from_user_id": 383266399,
"from_user_id_str": "383266399",
"from_user_name": "Herman",
"geo": null,
"id": 324581166764130300,
"id_str": "324581166764130305",
"iso_language_code": "en",
"metadata": {
"result_type": "recent"
},
"source": "",
"text": "Life on the spectrum: 5 books about autism and Asperger's - Mother Nature Network #autism #asperger #pddnos #pdd #asd"
}, {
"created_at": "Wed, 17 Apr 2013 17:52:32 +0000",
"from_user": "Elchinitooooo",
"from_user_id": 903231720,
"from_user_id_str": "903231720",
"from_user_name": "ChinoCochino..^^",
"geo": null,
"id": 324581154667782140,
"id_str": "324581154667782147",
"iso_language_code": "es",
"metadata": {
"result_type": "recent"
},
"source": "",
"text": "Mañana viene mi amor :3 asd asd"
}];
self.add = function (item) {
shoppingCart.push(item);
}
self.count = function () {
console.log(shoppingCart);
return shoppingCart.length;
}
self.log = function () {
return shoppingCart;
}
});
Here is the controller for the view below:
myApp.controller('ResultsCtrl',
function ResultsCtrl($scope, $resource, cart) {
$scope.cart = cart;
$scope.shoppingCart = cart.shoppingCart;
});
Here is the html for that view:
<div>
<table>{{cart.log()}}
<br>
<ul>
<li ng-repeat="item in shoppingCart">{{item.text}}</li>
</ul>
</table>
</div>
I'm not getting any errors in Firebug, so I'm imagining I'm not referencing the array correctly, but have been unable to figure out how.
Thank you very much for any assistance you might be able to offer.

Answer 1

It looks like you're trying to accessing the shoppingCart var directly from your controller with the line
$scope.shoppingCart = cart.shoppingCart;
However, shoppingCart isn't attached to self/this, effectively making it private, so I don't think that type of access is possible. The log method in your service returns the shoppingCart var, so maybe it'll help if you change that above line to:
$scope.shoppingCart = cart.log();
I'm not exactly sure if that will work using the .service method, so if it fails you may want to look into using .factory instead, which does basically the same as .service but allows you to return an object that will be the service rather than this.