title: Show and hide different contents with angularjs ng-show / ng-hide
body: <p>I am new with angularjs and struggling to make some logic for Showing and hiding different Div's using ng-show and ng-hide based on different click.</p>
  
  <p><strong><a href="http://plnkr.co/edit/GqSaY4GfLFHCzXzmXU7B?p=preview" rel="nofollow">PLUNKER</a></strong> </p>
  
  <p><strong>View 1:</strong></p>
  
  <pre><code>&lt;div ng-hide="section1"&gt;
    &lt;select&gt;
      &lt;option&gt;Select List 1&lt;/option&gt;
      &lt;option&gt;Select List 2&lt;/option&gt;
    &lt;/select&gt;
  &lt;/div&gt;
  &lt;div ng-hide="section1"&gt;
    &lt;ul&gt;
      &lt;li ng-repeat="name in names"&gt;{{name.item}}&lt;/li&gt;
    &lt;/ul&gt;
    &lt;button type="button" ng-click="section1=!section1"&gt;Edit&lt;/button&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Initially it shows a Dropdown, some list Item and Edit button</p>
  
  <p>Clicking on Edit button Everything hides and shows View 2</p>
  
  <p><strong>View 2:</strong></p>
  
  <pre><code>&lt;div ng-show="section1"&gt;
         &lt;button type="button" ng-click="section2=!section2"&gt;+ Create New Item&lt;/button&gt;
      &lt;/div&gt;
      &lt;div ng-show="section1"&gt;
        &lt;ul&gt;
          &lt;li ng-repeat="name in names"&gt;
            &lt;input type="text" ng-model="name.item"&gt;
          &lt;/li&gt;
        &lt;/ul&gt;
        &lt;button type="button" ng-click="section1=!section1"&gt;Save&lt;/button&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>On view 2 There is a button "Create New item" , List of Input fields with same value of view 1's list items and a save button.
  This view 2 is basically edit mode of view 1. </p>
  
  <p>Upto now works fine.</p>
  
  <p><strong>Problem</strong>: If I click "+Create new item", "View 2" Should Hide and "View 3" should Open. </p>
  
  <p>View 3 Contains some blank input list and "Save button".Clicking on "save button" Hide "View 3" and again open "View 1". </p>
  
  <p><strong>View 3</strong></p>
  
  <pre><code>&lt;div ng-show="section2"&gt;
        &lt;ul&gt;
          &lt;li ng-repeat="name in names"&gt;
            &lt;input type="text"&gt;
          &lt;/li&gt;
        &lt;/ul&gt;
        &lt;button type="button" ng-click="section2=!section2"&gt;Save New List&lt;/button&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>I am struggling to manage 3 different view based on different button click with ng-show and Hide. It's not showing and hiding properly from clicking "+create new button".</p>
  
  <p>Is this possible to make it work perfectly with ng-show &amp; ng-hide only ? 
  Is there any better way to handle ?</p>
  
  <p>Any help will be appreciated. </p>