title: Angular ng-click load controller
body: <p>I'm trying to practice angular and I'm stuck this this.</p>
  
  <p>How do I make <strong>ng-click</strong> load the <strong>displayController</strong>? Or am I doing this wrong way?</p>
  
  <p><strong>The Angular</strong></p>
  
  <pre><code>var bible = angular.module('bible', []);
  
  // Load the Books
  bible.controller('listController', ['$scope', '$http', function($scope, $http) {
  
      $http.get('books.json').success(function(data) {
          $scope.books = data
      });
  
  }]);
  
  bible.controller('displayController', function($scope) {
      $scope.test = "TEST TEXT";
  });
  </code></pre>
  
  <p><strong>The HTML</strong></p>
  
  <pre><code>&lt;div class="row"&gt;
          &lt;div class="col-md-12" ng-controller="listController"&gt;
              &lt;table class="table"&gt;
                  &lt;thead&gt;
                      &lt;th&gt;Testament&lt;/th&gt;
                      &lt;th&gt;Title&lt;/th&gt;
                      &lt;th&gt;Chapters&lt;/th&gt;
                  &lt;/thead&gt;
                  &lt;tbody&gt;
                      &lt;tr ng-repeat="book in books"&gt;
                          &lt;td&gt;{{book.testament}}&lt;/td&gt;
                          &lt;td&gt;&lt;a href="#" ng-click="displayController"&gt;{{book.title}}&lt;/a&gt;&lt;/td&gt;
                          &lt;td&gt;{{book.chapters}}&lt;/td&gt;
                      &lt;/tr&gt;
                  &lt;/tbody&gt;
              &lt;/table&gt;
  
              &lt;div class="display-book" ng-controller="displayController"&gt;
                  {{test}}
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>