A demo of ng-click in AngularJS with a link

HTML Code
Output
<!DOCTYPE html>
<html lang="en">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
<head>
<style>


.title {
  margin-bottom: 70px;
  font-size:16px;
  font-weight:700;
}

.linkcls {
  color: #2c3e50;
  transition: color 0.2s ease-out;
  /*padding: 5px 10px;*/
  margin-right: 16px;
}

.linkcls :hover {
  color: #2ecc71;
}

.container {
  border: 1px dotted #408080;
  height: 60px;
  margin-top: 20px;
  border-radius: 10px;
  position: relative;
  font-size: 14px;
}

.container p {
  line-height: 31px;
}

.show-ele {
  background: #415665;
  height: auto;
  width:300px;
  border-radius: 15px;
  padding:20px;
  font-size:22px;
  color:#fff;   
}
</style>
</head>
<body>
<div ng-app="">
  <p class="title">A demo of ng-click in link</p>
  <a href="#" class="linkcls" ng-click="displaycontent=true">Display Content</a>
  <button class="btn btn-success" ng-click="displaycontent=false">Hide Content</button> 
  
  <div class="container">
    <p  ng-hide="displaycontent">Click the link to display content!</p>
    <h2 class="show-ele" ng-show="displaycontent">This is the content shown as you clicked the link!</h2>
  </div>
  
</div>    

 
</body>
</html>
A demo of ng-click in link
Display Content
Click the link to display content!