title: How to hide a div by clicking a button?
body: <p>In my angular.js learning project I want to hide one div and show another when I click a button.
  In this code, I'd like the first div to be hidden at the click (or even destroyed?) and the second div to be shown. 
  Basically I want the user experience of going from page 1 to page 2 in my app.
  How do I make this happen?</p>
  
  <p>Index.html</p>
  
  <pre><code>  &lt;ion-content ng-controller="StartpageCtrl"&gt;
  
        &lt;div class="list card" id="startCard" ng-show="showstartCard"&gt;
            &lt;div class="item item-image item item-text-wrap"&gt;
                Card 1
            &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="list card" id="secondCard" ng-show="showsecondCard"&gt;
            &lt;div class="item item-image item item-text-wrap"&gt;
                Card 2
            &lt;/div&gt;
        &lt;/div&gt;
  
        &lt;button ng-click="hideCard()" class="button button-full button-calm button icon-right ion-chevron-right"&gt;
            Start now
        &lt;/button&gt;
  
    &lt;/ion-content&gt;
  </code></pre>
  
  <p>controllers.js</p>
  
  <pre><code>.controller("StartpageCtrl", funcion($scope){
      $scope.showstartCard = true;
      $scope.showsecondCard = false;
  
      $scope.hideCard = function() {
          $scope.showstartCard = false;
          $scope.showsecondCard = true;
      };
  });
  </code></pre>
  
  <p>When I run the page I see "Card 2" and nothing happens when I click the button.
  What I wanted to see was "Card 1" and for it to switch to "Card 2" as I click the button...</p>
  
  <hr>
  
  <p><strong>Solved</strong>
  I had forgotten to add references to controllers.js in the app.js angular.module as well as the script tag in index.html. It works fine now.</p>