AngularJS Template

<!DOCTYPE html>
<html ng-app="ngexample">
<head>  <title>ngexample -</title>  <link rel="stylesheet" href="style.css" />
  <script data-require="angular.js@1.2.25" data-semver="1.2.25" src="https://code.angularjs.org/1.2.25/angular.js"></script>
  <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" data-semver="3.2.0" data-require="bootstrap-css@3.2.0" />
  <script src="script.js"></script></head>

<body>
  <div ng-controller="HarryCtrl">
    <student></student>
  </div>  <br/>
  <div ng-controller="DracoCtrl">
    <student></student>
  </div>  <hr/>
  <div ng-controller="MainCtrl">
    <div><label>I am a tricky question</label>  <br/>
      <span answer>I am the answer</span>
    </div>
  </div>
</body>
</html>

var app = angular.module('ngexample', []);

app.controller("HarryCtrl", function($scope) {
  $scope.student = {
    "name": "Harry Potter",
    "house": "Gryffindor"
  };
});
app.controller("DracoCtrl", function($scope) {
  $scope.student = {
    "name": "Draco Malfoy",
    "house": "Slytherin"
  };
});

app.directive("student", function() {
  return {
    restrict: "E",
    template: "My Name is {{student.name}} and I belong to {{student.house}}"
  };
});

app.controller("MainCtrl", function($scope) {
  $scope.showAnswer = false;
});
app.directive("answer", function() {
  return {
    restrict: 'A',
    template: '<pre ng-show="showAnswer"><div ng-transclude></div></pre><button ng-click="showAnswer=!showAnswer"> {{showAnswer?"Hide Answer":"show answer"}}</button>',
    transclude: true,
  };
});

pre {
  width: 25%;
}