Angular Form Submit built with ng-repeat

Question

I am trying to build a form with Angular that creates inputs based off fields in a mongoDB using ng-repeat. Im new to angular so I am not quite sure how to execute this properly.

Here is simplified html:

<form ng-controller="SettingsFormCtrl as form" ng-submit="form.processForm()" novalidate>
    <div class="tabs">
        <div class="usertab" ng-repeat="(field,value) in formData.usertab">
             <input ng-model="{{field}}" name="{{field}}" value="{{value}}" required>
             <input type="submit">
        </div>
        <div class="infotab" ng-repeat="(field, value) in formData.infotab">
             <input ng-model="{{field}}" name="{{field}}" value="{{value}}" required>
             <input type="submit">
        </div>
    </div>
</form>

Here is app.js:

function SettingsFormCtrl($scope,$http){
var profile = this;
$http.get("api/profile/").success(function(response) {
    profile.result = response;
});
$scope.formData = profile.result;
$scope.processForm = function() {
    $http.post('pi/profile/submit', $scope.formData) .success(function(data) {
        console.log(data);
        if (!data.success) {
            // if not successful, bind errors to error variables
            alert('succes!');
        } else {
            // if successful, bind success message to message
            alert('no');
        }
    });
};
}
angular
.module('inspinia')
.controller('ProfileCtrl',ProfileCtrl)
.controller('SettingsFormCtrl',SettingsFormCtrl)

And here is the .get Data:

{
 "usertab":
           {
             "username":"Bob",
             "email":"bob@email.com"
           },
 "infotab":
           {
             "phone":"988-333-1245",
             "age":"44"
           }
}

Any help is definitely appreciated.

Answer 1

Your question is not well constructed, but I noticed some errors that can cause your code not to work

1. In your view, when you are binding values in an attributes you do not need to add the {{}} . Angular will automatic try to parse it as an expression.
2. In your angular.module I am not sure if this is the whole project, but to declare(create) a module, you need to add an empty array [] or an array filled with your dependencies to the module, without it, angular would think you are trying to inject a module and when it's not found, it would throw error.
3. Another key thing is that where you are doing $scope.formData is wrong, you are storing the response from the .get in a variable, which is out of angular scope. When the result is available, angular would not know, so to make this work you need to store it directly to the $scope.formData so that angular would update the view as soon as the result is available.

I created a plnkr for this reflecting the changes I made

I hope this answers your question.