title: Add item to a dropdown and a text field in angular.js
body: <p>I've been dealing with this problem for a long time. I currently have a function called "add ()" that allows me to add items to an array that feeds a dropdown and text fields. Every time I add a new item to the array, I add it empty:</p>
  
  <pre><code>$scope.aAnimals.push({"animal": ""})
  </code></pre>
  
  <p>This causes a problem with the dropdown, since the value of "animal" is equal to ""
    </p>
  
  <pre><code>&lt;Option style="display: none" value=""&gt; Select an animal &lt;/option&gt;
  </code></pre>
  
  <p>Then the item is not added. Both "animal" and the dropdown value of the first option are empty strings. If you add a value for "animal", other than "" here it would work and would be added to the dropdown.</p>
  
  <p>What I can do? I want the generated text fields to be empty, and the dropdown adds the item.</p>
  
  <pre><code> &lt;select class="form-control" ng-model='obj.animal' id='animal' name='animal'  
      ng-options="opt as opt.animal for opt in aAnimals  track by opt.animal"&gt;
            &lt;option style="display:none" value=""&gt;Select an animal&lt;/option&gt;
    &lt;/select&gt;
  
    &lt;div ng-repeat='item in aAnimals'&gt;
      &lt;input type='text' value={{item.animal}} class='animal' /&gt;
    &lt;/div&gt;
  
  
   $scope.obj = {}
   $scope.aAnimals=[{ "animal": "cat"},{ "animal": "dog"}]
  
   $scope.add=function(){
     $scope.aAnimals.push({ "animal": ""})
   }
  </code></pre>
  
  <p><a href="http://plnkr.co/edit/PRDp3a1bDJKtRmGR9GMY?p=preview" rel="nofollow noreferrer">http://plnkr.co/edit/PRDp3a1bDJKtRmGR9GMY?p=preview</a></p>