Angularjs 如何在div下面插入记录？

通过使用angularjs，我将两个值相乘，但当我单击add按钮时，它应该显示在文本框下面，如

price 10 qty 2 total  20  --->Add>

Price    qty   Total
10        2     20

html代码

<div class="row">
    <div ng-controller="Supercntrl">
        <div class="form-inline" id="Mom">
            Price  <input type="text" ng-model="price" class="form-control" />
            quentity <input type="text" ng-model="Quantity" class="form-control" ng-change="Claci()" />
            Total <input type="text" ng-model="Total" class="form-control" />

            <input type="button" class="btn btn-sm btn-success" value="Add" ng-click="AddDetails()" />

        </div>
        <div >
//Display Insered Record
            </div>
    </div>
</div>

请建议e如何显示其HTML下的值：

<div>
    <!-- //Display Insered Record -->
    <ul ng-repeat="total in totals">
        <li>Price: {{total.price}}</li>
        <li>Quantity: {{total.quantity}}</li>
        <li>Total: {{total.total}}</li>
    </ul>
</div>

JSFIDLE演示

<div>
    <!-- //Display Insered Record -->
    <ul ng-repeat="total in totals">
        <li>Price: {{total.price}}</li>
        <li>Quantity: {{total.quantity}}</li>
        <li>Total: {{total.total}}</li>
    </ul>
</div>

$scope.totals = []
$scope.AddDetails = function() {
    $scope.totals.push({
        price: $scope.price,
        quantity: $scope.Quantity,
        total: $scope.Total
    })
    console.log($scope.totals)
}