title: Why am I getting a wrongly formed request with this angularjs form?
body: <p>I have the following table:</p>
  
  <pre><code>&lt;uib-accordion&gt;
      &lt;uib-accordion-group heading="Roles" is-open="true"&gt;
          &lt;table class="table table-hover"&gt;
              &lt;thead&gt;
              &lt;tr&gt;
                  &lt;th&gt;Role Name&lt;/th&gt;
                  &lt;th&gt;Access for&lt;/th&gt;
                  &lt;th&gt;Access to&lt;/th&gt;
                  &lt;th&gt;Action&lt;/th&gt;
              &lt;/tr&gt;
              &lt;/thead&gt;
              &lt;tbody&gt;
              &lt;tr ng-repeat="role in ctrl.app.roles.base track by $index"&gt;
                  &lt;td&gt;
                      &lt;input type="text" class="form-control" id="inputRoleName" name="inputID" ng-model="role.id" placeholder="Enter mame of role" ng-minlength='3' ng-maxlength='100' required&gt;
                  &lt;/td&gt;
                  &lt;td&gt;
                      &lt;input type="text" class="form-control" id="inputResource1" name="inputRes1" ng-model="role.res1" placeholder="Enter name of first resource" ng-minlength='3' ng-maxlength='100' required&gt;
                  &lt;/td&gt;
                  &lt;td&gt;
                      &lt;input type="text" class="form-control" id="inputResource2" name="inputRes2" ng-model="role.res2" placeholder="Enter name of second resource" ng-minlength='3' ng-maxlength='100' required&gt;
                  &lt;/td&gt;
                  &lt;td&gt;
                      &lt;input type="text" class="form-control" id="inputAction" name="inputAc" ng-model="role.action" placeholder="Enter action required" ng-minlength='3' ng-maxlength='100' required&gt;
                  &lt;/td&gt;
              &lt;/tr&gt;
              &lt;/tbody&gt;
          &lt;/table&gt;
          &lt;button class="cbtn cbtn-plus" ng-click="ctrl.AddRole('base')"&gt;+&lt;/button&gt;
      &lt;/uib-accordion-group&gt;
  &lt;/uib-accordion&gt;
  </code></pre>
  
  <p>It basically is a table, with a '+' button situated at the bottom of the table, and whenever you click it, 4 text boxes will appear to fill the values. Now, I have written the following controller function for this:</p>
  
  <pre><code>function AddRole(section) {
      if (!self.app.roles) self.app.roles = {};
      if (!self.app.roles[section]) self.app.roles[section] = [];
      self.app.roles[section].push({actions: []});
  }
  </code></pre>
  
  <p>However, when I see the JSON request being formed, there is something going wrong with this. Because, in the JSON request, no matter what value I fill inside the text boxes, I see this:</p>
  
  <pre><code>"roles":{"base":[{"actions":[]}]}
  </code></pre>
  
  <p>Where am I going wrong in this?
  Thanks!</p>