How to hide a div by clicking a button? - angularjs

Question

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?
Index.html
<ion-content ng-controller="StartpageCtrl">
<div class="list card" id="startCard" ng-show="showstartCard">
<div class="item item-image item item-text-wrap">
Card 1
</div>
</div>
<div class="list card" id="secondCard" ng-show="showsecondCard">
<div class="item item-image item item-text-wrap">
Card 2
</div>
</div>
<button ng-click="hideCard()" class="button button-full button-calm button icon-right ion-chevron-right">
Start now
</button>
</ion-content>
controllers.js
.controller("StartpageCtrl", funcion($scope){
$scope.showstartCard = true;
$scope.showsecondCard = false;
$scope.hideCard = function() {
$scope.showstartCard = false;
$scope.showsecondCard = true;
};
});
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...
Solved
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.

Answer 1

Using angular:
HTML file:
<td>Source Doc..
<div id="mydiv" ng-show="showDetails">
<div id="mydiv-container">
<div id="mydiv-content">
Close
<br>
hello
</div>
</div>
</div>
</td>
css file:
body {
height: 100%;
background-color: #F0F0F0;
font-family: Arial, sans-serif;
}
#mydiv {
width: 100%;
height: 100%;
overflow: hidden;
left: 100px;
top: 150px;
position: absolute;
opacity: 0.95;
}
#mydiv-container {
margin-left: auto;
margin-right: auto;
}
#mydiv-content {
width: 70%;
padding: 20px;
background-color: white;
border: 1px solid #6089F7;
}
a {
color: #5874BF;
text-decoration: none;
}
a:hover {
color: #112763;
}

Answer 2

If you are looking for toggle, then this code might help as there is no need to have any extra CSS or JS functions needed.
<button ng-click="isDetailOpen = !isDetailOpen"
ng-class="!isDetailOpen ? 'ion-ios-arrow-down' : 'ion-ios-arrow-up'"
class="button button-clear button-positive icon-right">
<span ng-show="!isDetailOpen">More Detail</span>
<span ng-show="isDetailOpen">Less Detail</span>
</button>
<div ng-show="isDetailOpen">
<p>Per ad ferri dicta, omnis laudem dicunt duo an. Ex pri solum definitiones.</p>
</div>
I figured it out while working on Angular-Ionic project.