Angular - displaying nested collections, using the `group-by` filter

Question

I'm playing around with the angular group-by filter- I've tried to replicate their example, it's not working yet. What am I doing wrong?

Here's a plunker

Here's the html:

 <div ng-controller="AccordionDemoCtrl">
    <accordion close-others="oneAtATime">

      <accordion-group is-open="group.isOpen" ng-repeat="(key, value) in groups | groupBy: 'title'">
        <accordion-heading><i class="glyphicon-plus"></i> {{ key }}
          <i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': group.isOpen, 'glyphicon-chevron-right': !group.isOpen}"></i>
        </accordion-heading>
        {{group.content}}
        <ul>
      <li ng-repeat="group in value">
        list item: {{group.list}}
      </li>
    </ul>

      </accordion-group>

    </accordion>
  </div>

Here's the js:

angular.module('app', ['ui.bootstrap','ngSanitize','angular.filter']);
angular.module('ui.bootstrap.demo').controller('AccordionDemoCtrl', function ($scope) {
  $scope.oneAtATime = true;

  $scope.groups = [
    {
      title: 'title 1',
      content: 'content 1',
      isOpen: true
    },
    {
      title: 'title 2',
      content: 'Content 2'
    },
    {
      title: 'title 3',
      content: 'Content 3'
    },
    {
      title: 'title 4',
      content: 'content 4'
    },
    {
      title: 'title 5',
      content: 'content 5'
    },
    {
      title: 'title 1',
      list: 'item1'
    },
    {
      title: 'title 1',
      list: 'item2'
    },
    {
      title: 'title 1',
      list: 'item3'
    },
    {
      title: 'title 2',
      list: 'item1'
    },
    {
      title: 'title 2',
      list: 'item2'
    },
    {
      title: 'title 3',
      list: 'item1'
    },
    {
      title: 'title 3',
      list: 'item2'
    },    
    {
      title: 'title 4',
      list: 'item1'
    },
    {
      title: 'title 5',
      list: 'item1'
    }
  ];
});

Maybe I'm approaching this wrong, perhaps my groups in the js file is funky, what I'm trying to do is basically have a collection that has one title and one content entry for each collection, but multiple list entries (basically multiple bullet points). But it seems from their example what I am doing should work?

What I'd prefer to do in the js file is something like this:

$scope.groups = [
    {
      title: 'title 1',
      content: 'content 1',
      item: 'bullet point 1',
      isOpen: true
    },
    {
      title: 'title 2',
      content: 'Content 2'
      item: 'bullet point 1',
      item: 'bullet point 2'
    },
    {
      title: 'title 3',
      content: 'Content 3',
      item: 'bullet point 1',
      item: 'bullet point 2',
      item: 'bullet point 3'
    },
    {
      title: 'title 4',
      content: 'content 4',
      item: 'bullet point 1'
    },
    {
      title: 'title 5',
      content: 'content 5',
      item: 'bullet point 1',
      item: 'bullet point 2'
    }
  ];

Answer 1

Doesn't look like you have angular filters in your module dependancies list:

change:

angular.module('app', ['ui.bootstrap','ngSanitize']);

to:

angular.module('app', ['ui.bootstrap','ngSanitize','angular.filter']);

---

angular.module('app', ['ui.bootstrap', 'ngSanitize', 'angular.filter']);
angular.module('app').controller('AccordionDemoCtrl', function($scope) {
  $scope.oneAtATime = true;
  $scope.groups = [{
    title: 'title 1',
    content: 'content 1',
    isOpen: true
  }, {
    title: 'title 2',
    content: 'Content 2'
  }, {
    title: 'title 3',
    content: 'Content 3'
  }, {
    title: 'title 4',
    content: 'content 4'
  }, {
    title: 'title 5',
    content: 'content 5'
  }, {
    title: 'title 1',
    list: 'item1'
  }, {
    title: 'title 1',
    list: 'item2'
  }, {
    title: 'title 1',
    list: 'item3'
  }, {
    title: 'title 2',
    list: 'item1'
  }, {
    title: 'title 2',
    list: 'item2'
  }, {
    title: 'title 3',
    list: 'item1'
  }, {
    title: 'title 3',
    list: 'item2'
  }, {
    title: 'title 4',
    list: 'item1'
  }, {
    title: 'title 5',
    list: 'item1'
  }];
});

h1 {
  font-size: 10px;
  padding-bottom: 50px;
}

<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.css">
  <link rel="stylesheet" href="style.css">

  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.1/angular.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-filter/0.5.4/angular-filter.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.1/angular-sanitize.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.13.0/ui-bootstrap-tpls.js"></script>
</head>

<body ng-app="app">
  <h1>Dynamic angular accordion with nested angular collection - Test</h1>

  <div ng-controller="AccordionDemoCtrl">
    <accordion close-others="oneAtATime">

      <accordion-group is-open="group.isOpen" ng-repeat="(key, value) in groups | groupBy: 'title'">
        <accordion-heading><i class="glyphicon-plus"></i> {{ key }}
          <i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': group.isOpen, 'glyphicon-chevron-right': !group.isOpen}"></i>
        </accordion-heading>
        {{ group.content }}
        <ul>
          <li ng-repeat="group in value">
            list item: {{ group.list }}
          </li>
        </ul>

      </accordion-group>

    </accordion>
  </div>
</body>