Dynamically add key pair value to $scope variable and bind them with label and input
<p>I am working on an AngularJS project. I have a form where user can optionally add multiple pairs of (key, value).</p>

<p>Imagine the <em>key</em> is the label for a input box, the user can select from a dropdown list to be the value of the label (<em>key</em>). </p>

<p>The <em>value</em> is the value user entered in the input box. So, which means, the key and value are both dynamically decided by the user.</p>

<p>Here is what I have tried:</p>

<pre><code>$scope.optionArray = [];
$scope.addOption = function(key, value) {
    var temp = {};
    temp[key] = value;
    optionArray.push(temp);
}
</code></pre>

<p>And I am using ng-repeat to display the content of optionArray in the html file. 
In the html file, I have a button which can add an option to the pair like:</p>

<pre><code>&lt;button type="button" 
        data-ng-click="addOption(???, ???)"&gt;Add Options
&lt;/button&gt;
&lt;div ng-repeat="option in optionArray"&gt;
    &lt;label&gt;
        &lt;select ng-model=option.???&gt;
            &lt;option&gt;...&lt;/option&gt;
        &lt;/select&gt;
        &lt;input ng-model=option.???&gt;
    &lt;/label&gt;
&lt;/div&gt;
</code></pre>

<p>I am really confused because there are so many dynamic pieces. All ??? are the places that I don't know what to put.</p>

<p>In conclusion, I want the user to dynamically add a key, pair value to the form and they can edit those key-pair values however they want before the form is finally submitted. How can I do this?</p>