title: Show hide elements on button click in Angular
body: <p>I am trying to show/hide elements on button click. Below are the code which I have written so far. I am facing trouble while writing Angular code due to lack of knowledge.</p>
  
  <p>What I want to achieve is: I have 3 text boxes first box will be visible by default as soon user click on <code>+</code> button. Second text box will visible and same for third. To remove the boxes I have created a <code>-</code> button. So, as soon user click on <code>-</code> button last box will be hidden.</p>
  
  <pre><code>&lt;div class="col-xs-10"&gt;&lt;div class="topjob_resumetitle" ng-class="{ 'has-error' : errorcity }"&gt;
  &lt;input name="city" id="city" type="text" class="form-control textbox1 txt-auto" required="required" placeholder="Job Location* " ng-model="formData.city"&gt;
  &lt;div class = "errorba" ng-show="errorcity"&gt;{{errorcity}}&lt;/div&gt;
  &lt;/div&gt;&lt;/div&gt;
  &lt;div class="col-xs-2"&gt;
  &lt;button class="remove" ng-click="removeChoice()"&gt;-&lt;/button&gt;
  &lt;/div&gt;
  
  
  &lt;button class="addfields" ng-click="addNewChoice()"&gt;+&lt;/button&gt;&lt;br&gt;
  
  &lt;div class="col-xs-10"&gt;&lt;div class="topjob_resumetitle" ng-class="{ 'has-error' : errorcity1 }"&gt;
  &lt;input name="city1" id="city1" type="text" class="form-control textbox1 txt-auto" required="required" placeholder="Job Location* " ng-model="formData.city1"&gt;
  &lt;div class = "errorba" ng-show="errorcity"&gt;{{errorcity1}}&lt;/div&gt;
  &lt;/div&gt;&lt;/div&gt;
  &lt;div class="col-xs-2"&gt;
  &lt;button class="remove" ng-click="removeChoice()"&gt;-&lt;/button&gt;
  &lt;/div&gt;
  
  
  &lt;button class="addfields" ng-click="addNewChoice()"&gt;+&lt;/button&gt;&lt;br&gt;
  
  
  &lt;div class="col-xs-10"&gt;&lt;div class="topjob_resumetitle" ng-class="{ 'has-error' : errorcity }"&gt;
  &lt;input name="city2" id="city2" type="text" class="form-control textbox1 txt-auto" required="required" placeholder="Job Location* " ng-model="formData.city2"&gt;
  &lt;div class = "errorba" ng-show="errorcity2"&gt;{{errorcity2}}&lt;/div&gt;
  &lt;/div&gt;&lt;/div&gt;
  &lt;div class="col-xs-2"&gt;
  &lt;button class="remove" ng-click="removeChoice()"&gt;-&lt;/button&gt;
  &lt;/div&gt;
  
  
  &lt;button class="addfields" ng-click="addNewChoice()"&gt;+&lt;/button&gt;
  </code></pre>
  
  <p>I don't have anything under addNewChoice() and removeChoice().</p>