Trouble with AngularJS controller & service

Question

I have the following code for a small toy angular app

var myApp = angular.module("MyApp", []);
myApp.factory("Items", function()
{
    var items = {};
    items.query = function()
    {
        return
        [
            {
                title: "Mary had a little lamb",
                price: 2.5, 
            },
            {
                title: "My Experiments with Truth",
                price: 6.25, 
            },
            {
                title: "Indian Summer",
                price: 5.75, 
            },
        ];
    };
    return items;
});
function ItemsViewCtrl($scope, Items)
{
    $scope.items = Items.query();
    $scope.numberOfItems = function()
    {
        window.alert("We have "+$scope.items.length+" with us");
    };
}

So, we have a small module, a service and a controller! All good to go! But the problem is the array items is invisible or undefined in the template (that is of course adored by the ng-controller directive).

I even tried creating the controller by calling module.controller(), that did not work as well. So what am I missing here?

Answer 1

Place the oppening bracket in the same line as the return statement, i.e.:

return [    // <---------- HERE
    {
            title: "Mary had a little lamb",
            ...

Otherwise Javascript thinks you are returning nothing! See fiddle: http://jsfiddle.net/HG7Ek/