title: show one div and hide others on button click in angularjs
body: <p>I have four buttons and four <code>div</code>. Now, I want to show only one <code>div</code> at a time. It means, if I click the first button, only the first <code>div</code> should be visible and the others should be hidden.</p>
  
  <p>I have searched a lot with no luck. Please help me. I have tried just to show as below:</p>
  
  <p><strong>html</strong></p>
  
  <pre><code>&lt;button  ng-click="showAbout();"&gt;About Page&lt;/button&gt;
    &lt;button ng-click="showhelp();"&gt;Help page&lt;/button&gt;
    &lt;button ng-click="showinfo();"&gt;Info Page&lt;/button&gt;
    &lt;button  ng-click="showref();"&gt;Refrence page&lt;/button&gt;
  
    &lt;div class="form-group" ng-show="showabout"&gt;
      &lt;p&gt;About page&lt;/p&gt;
    &lt;/div&gt;
  
    &lt;div class="form-group" ng-show="showhelp" &gt;
      &lt;p&gt;Help page&lt;/p&gt;
    &lt;/div&gt;
  
    &lt;div class="form-group" ng-show="showinfo" &gt;
      &lt;p&gt;Info&lt;/p&gt;
    &lt;/div&gt;
  
    &lt;div class="form-group" ng-show="showref" &gt;
      &lt;p&gt;Refrence&lt;/p&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p><strong>js</strong></p>
  
  <pre><code>$scope.showabout = true;
  $scope.showAbout = function () {
    $scope.showhelp = false;
    $scope.showinfo = false;
    $scope.showref = false;
  };
  
  $scope.showhelp = true;
  $scope.showhelp = function () {
    $scope.showabout = false;
    $scope.showinfo = false;
    $scope.showref = false;
  };
  
  $scope.showinfo = true;
  $scope.showinfo = function () {
    $scope.showabout = false;
    $scope.showhelp = false;
    $scope.showref = false;
  };
  
  $scope.showref = true;
  $scope.showref = function () {
    $scope.showabout = false;
    $scope.showhelp = false;
    $scope.showinfo = false;
  };
  </code></pre>