JSFiddle - React, Tailwind, and code Playground

HTML

<body ng-app="myApp">
    <section ng-controller="AccountController">
        <ul>
            <li ng-repeat="duration in account.durations">
                <input type="text" ng-model="duration.start">
                <input type="text" ng-model="duration.end">
                <button ng-click="addDuration()">Add Line</button>
            </li>
        </ul>
        <button ng-click="saveAccount()">Save to Firebase</button>
    </section>
    {{account}}
</body>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.21/angular.min.js"></script>
    <script src="https://cdn.firebase.com/js/client/1.0.18/firebase.js"></script>
    <script src="https://cdn.firebase.com/libs/angularfire/0.8.0/angularfire.min.js"></script>

JavaScript

var myApp = angular.module('myApp', ['firebase']);

myApp.controller('AccountController', ['$scope', '$firebase', '$window', function ($scope, $firebase, $window) {
    var ref = new $window.Firebase('https://angularfire-problem.firebaseio.com/account');
    $scope.account = $firebase(ref).$asObject();
    
    $scope.account.$loaded().then(function () {
      if (typeof $scope.account.durations) {
        $scope.account.durations = [{}];
      }
    })

    $scope.addDuration = function () {
        $scope.account.durations.push({});
    };

    $scope.saveAccount = function () {
        $scope.account.$save();
    };
}]);