Shared view using different controller contexts

<!DOCTYPE html>
<html>

  <head>
    <script data-require="jquery@1.11.0" data-semver="1.11.0" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script data-require="angular.js@1.3.11" data-semver="1.3.11" src="https://code.angularjs.org/1.3.11/angular.js"></script>
    <script data-require="angular-route@1.3.11" data-semver="1.3.11" src="https://code.angularjs.org/1.3.11/angular-route.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="app.js"></script>
  </head>

  <body ng-app="QandA">
    <h1>Questions and answers</h1>
    <nav>
      <li><a href="#/question">Question details</a></li>
      <li><a href="#/answer">Answer details</a></li>
    </nav>
    <main ng-view></main>
  </body>

</html>

/* Styles go here */

body {
    padding: 10px;
    font-family: sans-serif;
    font-size: 16px;
    line-height: 1.5em;
}

.indent {
    margin-left: 2em;
    font-size: .9em;
    font-style: italic;
}

Binding different controller contexts to shared views in AngularJS
--
http://erraticdev.blogspot.com/2015/01/binding-different-controller-as.html

(function(angular) {
    
    angular
        .module("QandA", ["ngRoute"])
        .config(RouteConfiguration)
        .controller("QuestionController", QuestionController)
        .controller("AnswerController", AnswerController);
    
    function RouteConfiguration(provider) {
        provider
            .when("/question", {
                templateUrl: "question.html",
                controller: "QuestionController as question"
            })
            .when("/answer", {
                templateUrl: "answer.html",
                controller: "AnswerController as answer"
            })
            .otherwise({
                redirectTo: "/"
            });
    }
    RouteConfiguration.$inject = ["$routeProvider"];
    
    function QuestionController() {
        this.title = "How do we do this anyway?";
        this.body = "I was wondering how can I solve this thing using my brain only? It seems my brain isn't enough hence the question.";
        this.comments = [
            "I think this has already been answered elsewhere.",
            "Please provide a source link.",
            "Here you go: http://some.place.com/else",
            "Thanks, but that resource is dealing with a similar yet different problem."];
        this.answers = [{
            body: "This is the answer to your problems.",
            comments: [
                "I don't think so.",
                "Well maybe.",
                "I'm pretty sure you're on the right track.",
                "Brilliant solution! +1"]
        }];
    }
    
    function AnswerController() {
        this.question = {
            title: "What's the answer to the ultimate question of life, the universe, and everything?"
        };
        this.body = "The answer is 42.";
        this.comments = [
            "Are you sure, you've calculated it right?",
            "Well I've invested a week into this and tripple-checked my results.",
            "Seems legit, thanks..."];
    }
    
})(angular);

<div class="indent">
    Comments
    <ul class="comments">
        <li ng-repeat="comment in context.comments">
            <span ng-bind="comment"></span>
        </li>
    </ul>
</div>

<h3>Question</h3>
<h4 ng-bind="question.title"></h4>
<p ng-bind="question.body"></p>
<div ng-include="'comments.html'" ng-init="context = question"></div>
<div>This question has <span ng-bind="question.answers.length"></span> answer(s).</div>

<h3>Answer</h3>
<h4>This is an answer to <em ng-bind="answer.question.title"></em></h4>
<p ng-bind="answer.body"></p>
<div ng-include="'comments.html'" ng-init="context = answer"></div>