How to submit angular material chips as array when particular form submission?
<p>I want to submit below form as json object like this:</p>

<pre><code>object { id:1, version:0, roomNo:1, availability:"available", facility:{'a', 'b', 'c', 'd'} }
</code></pre>

<p>My form image as follows</p>

<p><a href="http://i.stack.imgur.com/sJBxU.png" rel="nofollow">angular material chips form image</a></p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div flex="10" id="lenth"&gt;
    &lt;div ng-controller="roomController as controller" ng-cloak="" class="inputdemoErrors"&gt;
        &lt;div class="card"&gt;

            &lt;form  ng-submit="controller.submit()" name="roomForm" &gt;

                &lt;input type="hidden" ng-value="roomDTO.id" ng-model="roomDTO.id" /&gt;
                &lt;input type="hidden" ng-value="roomDTO.version" ng-model="roomDTO.version" /&gt;
                &lt;md-toolbar class="md-hue-2" &gt;&lt;div class="md-toolbar-tools"&gt;&lt;span&gt;{{roomHomeTitle}}&lt;/span&gt;&lt;/div&gt;&lt;/md-toolbar&gt;
                &lt;div id="formBody"&gt;
                    &lt;md-input-container class="md-block"&gt;
                        &lt;label&gt;Room no&lt;/label&gt;
                        &lt;input type="text" md-maxlength="30" required="" md-no-asterisk="" name="roomNo" ng-value="roomDTO.roomNo"  ng-model="roomDTO.roomNo"&gt; 
                    &lt;/md-input-container&gt;
                    &lt;md-input-container class="md-block"&gt;
                        &lt;label&gt;Availability&lt;/label&gt;
                        &lt;input  type="text" md-maxlength="50" required="" md-no-asterisk="" name="availability" ng-value="roomDTO.isAvailable" ng-model="roomDTO.isAvailable"&gt;
                    &lt;md-input-container class="md-block" ng-init="controller.getAllFacilitiesForRoom()"&gt;
                   &lt;lable&gt; Room Facility&lt;/lable&gt;
                           &lt;md-chips class="custom-chips" ng-model="controller.facilityList" readonly="controller.readonly" md-removable="controller.removable" &gt;
                               &lt;input type="hidden"  ng-model={{$chip.id}}&gt;
                               &lt;md-chip-template&gt;

                                   &lt;strong&gt;{{$chip.facilityName}}&lt;/strong&gt;

                           &lt;/md-chip-template&gt;&lt;/md-chips&gt;
                    &lt;/md-input-container&gt;

                    &lt;div align="right"&gt;
                        &lt;md-input-container class="md-block"&gt;
                            &lt;div layout="row"&gt;

                                &lt;md-button type="reset" md-no-ink class="md-warn" &gt;&amp;#10160; Reset &lt;/md-button&gt;
                                &lt;md-button type="submit" md-no-ink class="md-primary"&gt;&amp;#10004;Create  &lt;/md-button&gt;
                            &lt;/div&gt;
                        &lt;/md-input-container&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
            &lt;/form&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>