Having trouble with ons-list and angular ng-repeat

Question

I declared a very simple component called betroomList:

(function () {
  'use strict';

  angular.module('betfriends')
    .component('betroomList', {
      templateUrl: 'src/home/betroomList.template.html',
      controller: BetroomListController,
      bindings: {
        betrooms: '<'
      }
    });

  function BetroomListController() {
    var ctrl = this;

    ctrl.betrooms = ['item1', 'item2', 'item3'];
  }
})();

As you can see, its controller contains a table of strings. In the template HTML, I would like to create an ons-list with the content of this table. Here is what contains betroomList.template.html:

<ons-list>
  <ons-list-item ng-repeat="item in $ctrl.betrooms">
    <h1>{{item}}</h1>
  </ons-list-item>
</ons-list>

My problem is that while it works fine in Google Chome it does not it Firefox. Indeed, in Chrome it correctly displays the list with 3 rows "item1", "item2" and "item3" but in Firefox I only have a list of one element "{{item}}". In addition, the Firefox console contains an error:

Error: node is undefined
compositeLinkFn@http://localhost:63342/BetFriends/www/lib/angular.js:8623:13
nodeLinkFn@http://localhost:63342/BetFriends/www/lib/angular.js:9330:24
compositeLinkFn@http://localhost:63342/BetFriends/www/lib/angular.js:8620:13
publicLinkFn@http://localhost:63342/BetFriends/www/lib/angular.js:8500:30

It might be worth noting that if I replace respectively ons-list with ul and ons-list-item with li, everything works as expected.

Does anyone have an idea why this doesn't work?

Thanks a lot in advance.

Answer 1

You might have to take it up with Onsen UI.

The only thing I can see is that they recommend using 3 classes for the item, basically to be left, centre and right:

<ons-list-item>
    <div class="left">Left</div>
    <div class="center">Center</div>
    <div class="right">Right</div>
</ons-list-item>

You are using a H1 tag around your {{item}}. Maybe you should try using just a div, and see what it does.