ng-show ng-hide angular questions-answer - angularjs

Question

I have a website where i show different questions and when you click in one appear the answer and if you click again dissapear. And i trying to do it in
Angular but for the moment i can't achive it.
<ul id="question-list">
<li>
<h1><a ng-click="answer = !answer" >What is this?</a></h1>
<h3 ng-show="answer"> this</h3>
</li>
<li>
<h1 >What is the question?</h1>
<h3>It </h3>
</li>
<li>
<h1>What is the question?</h1>
<h3> Ipsum.</h3>
</li>
Angular Code
ehlApp.controller('faqController', function ($scope) {
$scope.answer = true;
});

Answer 1

The code you posted worked perfectly in a properly set up app, so I'm guessing that's the problem.
<div ng-app="app" ng-controller="ctrl">
<ul id="question-list">
<li>
<h1><a ng-click="answer = !answer">What is this?</a></h1>
<h3 ng-show="answer"> this</h3>
</li>
<li>
<h1>What is the question?</h1>
<h3>It </h3>
</li>
<li>
<h1>What is the question?</h1>
<h3> Ipsum.</h3>
</li>
</ul>
</div>
<script>
var app = angular.module('app',[]);
app.controller('ctrl', function ($scope) {
$scope.answer = true;
});
</script>

Answer 2

Each question have there own answers so to display the answer attached jsbin
HTML :
<div ng-app="myApp">
<div ng-controller="MyCtrl as vm">
<ul id="question-list" >
<li ng-repeat = "questionAns in vm.questionList">
<h1 ng-click="questionAns.showAnswer = !questionAns.showAnswer"> <a ng-bind="questionAns.question"></a></h1>
<h3 ng-show="questionAns.showAnswer" ng-bind="questionAns.answer"></h3>
</li>
</ul>
</div>
JAVASCRIPT :
var app = angular.module("myApp",[]);
app.controller("MyCtrl", ["$scope", function ($scope) {
var vm = this;
vm.questionList = [{
"question" : "What is this question 1?",
"answer" : "this is answer1"
},{
"question" : "What is this question 2?",
"answer" : "this is answer2"
}];
}]);
jsbin to show hide

Answer 3

You can do that all in the template, example:
<p ng-click="x=!x">Something<span ng-show="x"> else</span>.</p>
Clicking on the <p> will make the <span> show and disappear.

Answer 4

<div ng-app="app" ng-controller="control">
<ul id="question-list">
<li>
<h1><a ng-click="answer = !answer">What is this?</a></h1>
<h3 ng-show="answer"> this</h3>
</li>
,<li>
<h1 ng-click="answer = !answer">What is the question?</h1>
<h3 ng-show="answer">It </h3>
</li>
<li>
<h1 ng-click="answer = !answer">What is the question?</h1>
<h3 ng-show="answer"> Ipsum.</h3>
</li>
</ul>
</div>
<script>
var app = angular.module('app',[]);
app.controller('control', function ($scope) {
$scope.answer = true;
});
</script>