title: How do I switch inline div elements uing angularjs? ng-switch or ng-hde or ng-show?
body: <p>I simply need to switch div orientation based on some type of event. It could be onclick, ng-switch, ng-show, ng-hide. Please show me one that works. I don't want to use ng-include.</p>
  
  <pre><code>   &lt;body ng-app="mdoApp"ng-init="getValue='1'"&gt;
      &lt;label&gt;type a number(1 to 3):
      &lt;input type="text" ng-model="getValue" /&gt;
      &lt;/label&gt;
      &lt;div class="div_contain1" ng-switch="getValue"&gt;
      &lt;span ng-switch-when="1"ng-hide=""&gt;&lt;div class="div_p2"&gt;PART 3&lt;/div&gt;
      &lt;div class="div_p2"&gt;  PART 2&lt;/div&gt;&lt;div class="div_p1"&gt; PART 1&lt;/div&gt;&lt;/span&gt;
      &lt;span ng-switch-when="2" ng-hide=""&gt;&lt;div class="div_p2"&gt;PART 3&lt;/div&gt;
      &lt;div class="div_p1"&gt; PART 2&lt;/div&gt;&lt;div class="div_p1"&gt; PART 1&lt;/div&gt;&lt;/span&gt;
      &lt;span ng-switch-when="3" ng-hide=""&gt;&lt;div class="div_p1"&gt;PART 3&lt;/div&gt;
      &lt;div class="div_p1"&gt; PART 2&lt;/div&gt;&lt;div class="div_p1"&gt; PART 1&lt;/div&gt;&lt;/span&gt;
      &lt;span ng-switch-default="1"&gt;&lt;div class="div_p2"&gt;PART 3&lt;/div&gt;
      &lt;div class="div_p2"&gt; PART 2&lt;/div&gt;&lt;div class="div_p1"&gt; PART 1&lt;/div&gt;&lt;/span&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>Ok, what I want to do is switch out  div panels when a form is submitted. Preferably during an on click event when form data is submitted. Each part represents a new form or questionare. Hence the user will be informed when they complete a section of the registration, by seeing at the top a graphical representation of them moving to the next Part of the registration. hence, Part 1, Part 2, Part 3. </p>
  
  <p>Ok,this is another attempt at manipulating div layers:</p>
  
  <pre><code>`&lt;!DOCTYPE HTML&gt;
    &lt;html&gt;
     &lt;head&gt;
  
  &lt;title&gt;Untitled 31&lt;/title&gt;
       &lt;script type="text/javascript" src="angular.min.js"&gt;&lt;/script&gt;
         &lt;/head&gt;
      &lt;body&gt;
     &lt;div ng-app="showApp" ng-init="showDiv='1'"&gt;
    &lt;div ng-controller="showView"&gt;
    &lt;label&gt;type a number(1 to 3):
    &lt;input type="text" ng-controller ="showView" ng-model="showDiv" /&gt;
    &lt;/label&gt;
     &lt;div ng-show="divA"&gt;con1&lt;/div&gt;
     &lt;div ng-show="divB"&gt;con2&lt;/div&gt;
     &lt;div ng-show="divC"&gt;con3&lt;/div&gt;
     &lt;/div&gt;&lt;/div&gt;&lt;p&gt;&lt;/p&gt; 
     &lt;script&gt;
     var app = angular.module('showApp', []);
     app.controller('showView', function(showDiv, $scope){
     return{
     If (showDiv === 1){
      $scope.divA = true;
      $scope.divB = false;
      $scope.divC = false;  
     }   
     If (showDiv === 2){
     $scope.divA = false;
     $scope.divB = true;
      $scope.divC = false;
    }   
    If (showDiv === 3){
     $scope.divA = false;
     $scope.divB = false;
     $scope.divC = true;
     }  
     }
     });
     &lt;/script&gt;
  
     &lt;/body&gt;
      &lt;/html&gt; `
  </code></pre>