AngularFire nested loops

http://stackoverflow.com/q/28238014

by Frank van Puffelen

HTML

<script src="https://cdn.firebase.com/js/client/2.0.3/firebase.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script>
<script src="https://cdn.firebase.com/libs/angularfire/0.9.0/angularfire.min.js"></script>
<script src="https://cdn-gh.firebase.com/demo-utils-script/demo-utils-angular.js"></script>
<div ng-app="app">
    <div ng-controller="ctrl">
        <!--
      <ul>
        <li ng-repeat="(item, id) in list">
            <span>{{item}}</span><button ng-click="remove(id)">x</button>
        </li>
      </ul>
        -->
        <ol>
            <li ng-repeat="item in list">
                {{item.$id}}
                <ol>
                    <li ng-repeat="child in item">{{child}}</li>
                </ol>
            </li>
        </ol>
    </div>
</div>

JavaScript

angular.module("app", ['firebase'])
    .controller("ctrl", function ($firebase, $scope) {

    var ref = new Firebase('https://testing12344.firebaseio.com/');
    var x=[{foo:"bar"}, {foo:"bar"}];
    var sync = $firebase(ref);
    var list = sync.$asArray();
    list.$add(x);

    $scope.list = list;
    list.$loaded().then(function(list) { console.log(list[0][0].foo); });
    $scope.remove = function (id){
        list.$remove(id);
    }   

})