AngularJS using ASP.NET form data don't change

Question

I want to use AngularJS to fill and commit my form. When I submit the form (without changes), the model is correctly changed. Also when I add an allocation, the default values are in the model. But when I changes a value, the changes aren't visible in the model (still the default values).

HTML

<div data-ng-app="BudgetApp">
    <div data-ng-controller="BudgetController">
        <table class="table table-striped table-bordered">
            <thead>
                <tr>
                    <th>Allocation For</th>
                    <th>Percent Allocated</th>
                    <th></th>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="allocation in model.Allocations">
                    <td>
                        <input value="{{allocation.Id}}"
                               type="hidden" />
                        <input value="{{allocation.Description}}"
                               type="text"
                               class="form-control" />
                    </td>
                    <td>
                        <input value="{{allocation.Percent}}"
                               type="text"
                               class="form-control" />
                    </td>
                    <td>
                        <a class="btn btn-danger btn-xs" ng-click="remove($index)">
                            <i class="glyphicon glyphicon-remove"></i>
                        </a>
                    </td>
                </tr>
            </tbody>
        </table>
        <a class="btn btn-default" ng-click="add()">Add Allocation</a>
        <a class="btn btn-primary" ng-click="save()">Save</a>
    </div>
</div>

JS

@section Scripts{
    <script src="~/Scripts/angular.min.js"></script>
    <script>
        (function () {
            var app = angular.module("BudgetApp", []);

            app.controller('BudgetController', ['$scope', '$http', function ($scope, $http) {
                console.log("start");

                var uri = "/api/Budget/GetBudget/" + @ViewBag.ID;
                $scope.model = [];
                $scope.model.Allocations = [];
                $http.get(uri).success(function(data) {
                    $scope.model = data;
                    console.log("qdsfsq");
                });

                $scope.add = function () {
                    $scope.model.Allocations.push({
                        Id: 0,
                        Description: 'test',
                        Percent: 0
                    });
                };

                $scope.remove = function (index) {
                    $scope.model.Allocations.splice(index, 1);
                };

                $scope.save = function() {
                    $http.post('/api/Budget/UpdateBudget', $scope.model).success(function(data) {
                        // window.location.href = "/widget";
                    });
                };
            }]);

        })();
    </script>
}

Answer 1

To resolve this you should change how you bind the data the ng-repeat and change the it to bind to ng-model instead of value . It should look like below:

<tr ng-repeat="allocation in model.Allocations">
    <td>
        <input ng-model="allocation.Id" type="hidden" />
        <input ng-model="allocation.Description" type="text" class="form-control" />
    </td>
    <td>
        <input ng-model="allocation.Percent" type="text" class="form-control" />
    </td>
    <td>
        <a class="btn btn-danger btn-xs" ng-click="remove($index)">
            <i class="glyphicon glyphicon-remove"></i>
        </a>
    </td>
</tr>

When you change the values they should now successfully also be seen in the model. I hope this helps.