ng-repeat not iterating array

Question

I'm not to Angular and just keep bumping into small problems here and there. I can't seem to get my array to display out, it just shows the {{products}}

JS Fiddle: http://jsfiddle.net/u5eBH/70/

HTML:

<div ng-app="products">
    <div ng-controller="ProductCtrl">

        <input type="checkbox" ng-click="includeBrand('Brand A')"/>Brand A<br>
        <input type="checkbox" ng-click="includeBrand('Brand B')"/>Brand B<br>
        <input type="checkbox" ng-click="includeBrand('Brand C')"/>Brand C<br>

        <ul>
            <li ng-repeat="p in products | filter:brandFilter">
                {{name}}
            </li>
        </ul>
        </div>
        </div>

JS

'use strict'

angular.module('products', []);

function ProductCtrl($scope) {
    $scope.products = [
        {
                        name:  'XXX-1A'
                        brand: 'Brand A',
                        material: 'tobacco',
                        size: '00',
                        type: 'water pipe',
                        style: 'heady',
                        feature: 'bent neck, coil condensor',
                        percolator: 'dome',
                        color:'red'
                    },
                    {
                        name:  'XXX-2B'
                        brand: 'Brand B',
                        material: 'tobacco',
                        size: '00',
                        type: 'water pipe',
                        style: 'heady',
                        feature: 'bent neck, coil condensor',
                        percolator: 'dome',
                        color:'red'
                    },
                    {
                        name:  'XXX-1C'
                        brand: 'Brand C',
                        material: 'tobacco',
                        size: '00',
                        type: 'water pipe',
                        style: 'heady',
                        feature: 'bent neck, coil condensor',
                        percolator: 'dome',
                        color:'red'
                    }
                ];
            });

    $scope.brandIncludes = [];

    $scope.includeBrand = function(brand) {
        var i = $.inArray(brand, $scope.brandIncludes);
        if (i > -1) {
            $scope.brandIncludes.splice(i, 1);
        } else {
            $scope.brandIncludes.push(brand);
        }
    }

    $scope.brandFilter = function(products) {
        if ($scope.brandIncludes.length > 0) {
            if ($.inArray(products.brand, $scope.brandIncludes) < 0)
                return;
        }

        return products;
    }
}

Also if someone could link me to some more in depth talks about the "ng-repeat="x in x " statement, I would greatly appreciate it. I just can't understand it well enough to use in myself. Thanks!

Answer 1

You forgot some commas in your JSON definition. When angular fails to evaluate {{ curly brackets }}, be sure to check your dev console for errors.

For instance:

{
  name: 'XXX-1A'       // <-- here you don't have a comma (same for each item)
  brand: 'Brand A',
  material: 'tobacco',
  size: '00',
  type: 'water pipe',
  style: 'heady',
  feature: 'bent neck, coil condensor',
  percolator: 'dome',
  color: 'red'
},

Also as pointed out by a comment, it should be {{p.name}} instead of {{name}}

Here is a fixed fiddle:

http://jsfiddle.net/a01g8wyp/