angularjs - How to hide a div by clicking a button? (SOLVED) -

in angular.js learning project want hide 1 div , show when click button. in code, i'd first div hidden @ click (or destroyed?) , second div shown. want user experience of going page 1 page 2 in app. how make 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       </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 run page see "card 2" , nothing happens when click button. wanted see "card 1" , switch "card 2" click button...

update sep 10 23:30 cet works fine now. had forgotten add references controllers.js in app.js angular.module script tag in index.html.

using angular:     html file:     <td><a href="#" ng-click="showdetails =! showdetails">source doc..</a>                 <div id="mydiv" ng-show="showdetails">                     <div id="mydiv-container">                         <div id="mydiv-content">                             <a href="#" ng-click="showdetails =! showdetails">close</a>                             <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;     }     {         color: #5874bf;         text-decoration: none;     }     a:hover {         color: #112763;     }