Producing JSON Arrays for Multiple Elements with same model name
<p>I am generating json data for multiple elements with angular. I am getting output as</p>

<pre><code>{"field":{"name":{"0":"a","1":"b"},"length":{"0":10,"1":20}}}
</code></pre>

<p>I want jsondata to be sophisticated (in array form) such as: </p>

<pre><code>{"field":[{"name":"a", "length":10},{"name":"b", "length":20}]}
</code></pre>

<p>How can I achieve this ?</p>

<pre class="lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;script src="https://rawgit.com/angular/bower-angular/master/angular.min.js"&gt;&lt;/script&gt;
&lt;meta charset=utf-8 /&gt;  
&lt;/head&gt;
&lt;body&gt;

  &lt;div ng-app="mainApp" ng-controller="JsonController as ctrl"&gt;

   &lt;div ng-repeat="a in [1,2] track by $index"&gt;
     &lt;input type="text" ng-model="task.field['name'][$index]"&gt;
     &lt;input type="number" ng-model="task.field['length'][$index]"&gt; 
   &lt;/div&gt;

    &lt;pre&gt;
    {{task}}
    &lt;/pre&gt;
  &lt;/div&gt;

&lt;script&gt;
  (function() {
    angular.module("mainApp", []).controller("JsonController", function($scope) {
          $scope.task = {};

          });
    }());
&lt;/script&gt;

&lt;/body&gt;
&lt;/html&gt;
</code></pre>