title: AngularJS Multiple Dynamic Views based on Single Route
body: <p>Forgive me if I don't explain this well. I'm having a hard time getting my mind around the real problem I'm having. I'm hoping that someone will be able to make sense of my ideas and probably correct my misunderstandings of MVC, the way Angular works, or the structure of my controllers and which components I have tied a controller to. Sorry for the long question, but I've included as many screenshots and as much code as I thought might be helpful in understanding my current predicament. I've been stuck on this for weeks.</p>
  
  <p>I'm building the initial stages of an EHR (Electronic Health Record) application that doctors would use in the office when visiting with patients. Obviously I'm not done styling everything or putting in content to make it look good. I'm also not finished making all of the data dynamic - which is what I'm having a hard time with. The piece I'm working on allows the doctor to select a patient, view information from their past visits, start a visit, and fill in the information for all of their symptoms, diagnoses, and prescription information. </p>
  
  <p><img src="https://i.stack.imgur.com/nuJV5.png" alt="Basic site layout"></p>
  
  <p>The left menu bar is a controller, the header is a controller, and the bottom part (patient summary) is a controller. I want it to function as you might expect - it loads the header initially and then swaps out the bottom 2/3 of the site (from summary to symptoms, diagnosis, and prescriptions). So, after clicking on <code>Start Visit</code>, it should load the piece below.</p>
  
  <p><img src="https://i.stack.imgur.com/KgGfn.png" alt="Started a Visit"></p>
  
  <p>As you can see from the first screenshot, the URL is <code>localhost:8080/#/patientSummary/1</code> where the 1 is the patient ID. Everything must be based off of that ID. So, when a doctor initially selects a patient, it should load that page and base the information in the header and the patient summary off of the ID (using a query to the DB that works just fine). Then in the transition to second screenshot, and all transitions within that page, the header should stay constant. </p>
  
  <p>In each of my views, patientSummary, symptoms, diagnosis, and prescriptions-tests, at the top I have <code>&lt;ng-include src="'templates/header.html'"&gt;&lt;/ng-include&gt;</code> to get the header. I know this is not good practice. So obviously every time I change a page it re-renders the header. As stated above, I don't want to do it this way, but this is the only way that I could get it to work.</p>
  
  <p>Any ideas on what I could do differently? It needs to work like I've described above, <strong>so that the header will stay constant on every page but also will be populated dynamically based off of the patient ID at the same time as the patient summary</strong>, but I can't figure out how. I've looked into Services/Cache to share the patient ID between the header and patient summary controllers, but that doesn't seem like the best way to do it, either (and every time I try it comes back as undefined even after I've injected it into the controller).</p>
  
  <p><strong>index.html</strong></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;title&gt;Patient Summary&lt;/title&gt;
      &lt;meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1"&gt;
      &lt;link rel="stylesheet" type="text/css" href="css/common.css"/&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div id="content" ng-app="osmosisApp" ng-controller="MainCtrl"&gt;
          &lt;!-- Left Menu --&gt;
          &lt;div id="left-menu-wrapper" ng-controller="MenuCtrl"&gt;
              &lt;div class="left-menu-button" ng-click="showLeftMenu = !showLeftMenu"&gt;&lt;/div&gt;
              &lt;nav id="left-menu" class="left-menu" ng-class="{'open' : showLeftMenu}"&gt;
                  &lt;h3&gt;Patient List&lt;/h3&gt;
                  &lt;block class="patient-button" ng-repeat="patient in patients" ng-click="go('/patientSummary/' + patient.id)"&gt;
                      &lt;img class="patient-button-image" ng-src="{{patient.picture}}"/&gt;
                      &lt;div id="patient-name-and-status" class="patient-name-and-status"&gt;
                          &lt;h4 class="patient-button-name"&gt;{{patient.name}}&lt;/h4&gt;
                          &lt;p class="patient-button-status"&gt;{{patient.status}}&lt;/p&gt;
                      &lt;/div&gt;
                  &lt;/block&gt;
              &lt;/nav&gt;
              &lt;div id="content-cover" ng-click="showLeftMenu = !showLeftMenu" ng-class="{'content-cover' : showLeftMenu, 'content-uncover' : !showLeftMenu}"&gt;&lt;/div&gt;
          &lt;/div&gt;
          &lt;!-- /Left Menu --&gt;
          &lt;!-- Content --&gt;
          &lt;div id="content-frame" ng-view&gt;&lt;/div&gt;
          &lt;!-- /Content --&gt;
      &lt;/div&gt;
      &lt;script src="http://maps.googleapis.com/maps/api/js?libraries=places&amp;sensor=true"&gt;&lt;/script&gt;
      &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.3/angular.js"&gt;&lt;/script&gt;
      &lt;script src="lib/angular/angular-route.js"&gt;&lt;/script&gt;
      &lt;script src="js/controllers.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>header.html</strong></p>
  
  <pre><code>&lt;!-- Header --&gt;
  &lt;div id="header-wrapper"&gt;
      &lt;div id="patient-summary-header" class="header-row" ng-controller="HeaderCtrl"&gt;
          &lt;div id="pic-and-info" class="column-1"&gt; 
              &lt;img id="patient-picture" ng-src="{{patient.picture}}" /&gt;
              &lt;h2 id="patient-name"&gt;{{patient.name}}&lt;/h2&gt;
              &lt;div id="patient-info"&gt;
                  &lt;p&gt;{{patient.age}}, {{patient.sex}}&lt;/p&gt; 
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div id="patient-vitals-graph" class="column-2"&gt;
              &lt;canvas id="vitals-graph"&gt;&lt;/canvas&gt;
          &lt;/div&gt;
          &lt;div id="logo-div" class="column-3"&gt;
              &lt;img id="logo" ng-src="{{'http://placehold.it/400x150'}}" /&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;!-- /Header --&gt;
  </code></pre>
  
  <p><strong>patientSummary.html (one of the views)</strong></p>
  
  <pre><code>&lt;ng-include src="'templates/header.html'"&gt;&lt;/ng-include&gt;
  &lt;!-- Patient Summary --&gt;
  &lt;!-- Nav Buttons --&gt;
  &lt;div id="start-visit" class="start-visit-button" ng-click="go('/symptoms')"&gt;Start Visit&lt;/div&gt;
  &lt;!-- /Nav Buttons --&gt;
  &lt;div id="patient-summary" class="section group"&gt; 
      &lt;div id="column1" class="column span-2-of-3 height-5-of-5"&gt;
          &lt;h2&gt;Past Visits&lt;/h2&gt;
          &lt;div id="past-visits-info" class="info-section height-5-of-5"&gt;
              &lt;div class="past-visits-display" ng-repeat="pastVisit in patientSummary.pastVisits"&gt;
                  &lt;h5&gt;Diagnosis&lt;/h5&gt;
                  &lt;p&gt;{{pastVisit.diagnosis}}&lt;/p&gt;
                  &lt;h5&gt;Symptoms&lt;/h5&gt;
                  &lt;ul&gt;
                      &lt;li ng-repeat="symptom in pastVisit.symptoms"&gt;{{symptom}}&lt;/li&gt;
                  &lt;/ul&gt;
                  &lt;div class="past-visits-display-date"&gt;{{pastVisit.date}}&lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt; 
      &lt;/div&gt;
      &lt;div id="column2" class="column span-1-of-3 height-5-of-5"&gt;
          &lt;h2&gt;Current Conditions&lt;/h2&gt;
          &lt;div class="info-section height-1-of-5"&gt;
              &lt;ul&gt;
                  &lt;li ng-repeat="condition in patientSummary.currentConditions"&gt;{{condition}}&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
          &lt;h2&gt;Current Prescriptions&lt;/h2&gt;
          &lt;div class="info-section height-2-of-5"&gt;
              &lt;ul&gt;
                  &lt;li ng-repeat="prescription in prescriptions | currentPrescriptions"&gt;{{prescription.name}}&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
          &lt;h2&gt;Expired Prescriptions&lt;/h2&gt;
          &lt;div class="info-section height-2-of-5"&gt;
              &lt;ul&gt;
                  &lt;li ng-repeat="prescription in prescriptions | expiredPrescriptions"&gt;{{prescription.name}}&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
          &lt;h2&gt;Patient Questions&lt;/h2&gt;
          &lt;div class="info-section height-1-of-5"&gt;
              &lt;ul&gt;
                  &lt;li ng-repeat="question in patientSummary.questions"&gt;{{question}}&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;!-- /Patient Summary --&gt;
  </code></pre>
  
  <p><strong>Routes in controllers.js</strong></p>
  
  <pre><code>var osmosisApp = angular.module('osmosisApp', ['ngRoute'], function($routeProvider, $httpProvider) {
      $routeProvider
          .when('/select-news', {
              templateUrl:'templates/select-news.html'
          })
          .when('/select-news/end-visit', {
              templateUrl:'templates/select-news.html',
              controller:'EndVisitCtrl'
          })
          .when('/patientSummary/:id', {
              templateUrl:'templates/patientSummary.html',
              controller:'SummaryCtrl'
          })
          .when('/symptoms', {
              templateUrl:'templates/symptoms.html',
              controller:'SymptomsCtrl'
          })
          .when('/prescriptions-tests', {
              templateUrl:'templates/prescriptions-tests.html',
              controller:'PrescriptionsTestsCtrl'
          })
          .when('/diagnosis', {
              templateUrl:'templates/diagnosis.html',
              controller:'DiagnosisCtrl'
          })
          .otherwise({redirectTo:'/select-news'});
  // Other magic to make POST stuff work
  </code></pre>
  
  <p><strong>Controllers in controllers.js</strong> </p>
  
  <pre><code>// Main Controller
  osmosisApp.controller('MainCtrl', ['$scope', '$location', function ($scope, $location) {
      $scope.showHeader = false;
  
      $scope.go = function(path) {
          $location.path(path);
      };
  
      $scope.$on('$routeChangeSuccess', function() {
          $.getScript("lib/chart/Chart.js", function() {
              $.getScript("js/chart.js"); 
          }); 
      });
  }]);
  
  // Header Controller
  osmosisApp.controller('HeaderCtrl', ['$scope', '$http', function ($scope, $http, cacheService) {
      //sharedProperties.getId();
      //cacheService.get('id');
  
      // Needs to grab the ID from the SummaryCtrl
      /*$http.post("/patient/getPatientInfo", {"patient_id" : 1})
          .success(function(response) {
              console.log("Server response: " + JSON.stringify(response));
          });*/
  
      $scope.patient = {
          "id" : 1,
          "name" : "Mike DeMille",
          "age" : "23",
          "sex" : "Male",
          "picture" : "images/MikeDeMille.png"
      };
  }]);
  
  // Patient Summary Controller
  osmosisApp.controller('SummaryCtrl', ['$scope', '$routeParams', function ($scope, $routeParams, cacheService) {
      //sharedProperties.setId($routeParams.id);
      //cacheService.put('id', $routeParams.id);
      $scope.patientSummary = {
          "currentConditions" : ["Lung cancer", "Another awful, life-threatening condition"],
          "pastVisits" : [{
              "date" : "9/1/2013",
              "symptoms" : ["Old age", "Mortality"],
              "diagnosis" : "The patient is going to die... Again",
              "prescriptions" : [{
                  "name" : "Prescription name",
                  "dose" : "Once daily",
                  "form" : "tablet",
                  "duration" : "30 days",
                  "refills" : "3",
                  "expiration" : "9/1/2014"
              },{
                  "name" : "Prescription name 2",
                  "dose" : "Twice daily",
                  "form" : "capsule",
                  "duration" : "60 days",
                  "refills" : "3",
                  "expiration" : "9/1/2014"
              }],
              "tests" : [{
                  "name" : "Test name",
                  "results" : "Blah blah blah, results"
              },{
                  "name" : "Test name 2",
                  "results" : "Blah blah blah, results 2"
              }]
          },{
              "date" : "7/3/2011",
              "symptoms" : ["Promiscuity", "Risk taking"],
              "diagnosis" : "The patient is going to die",
              "prescriptions" : [{
                  "name" : "Prescription name 3",
                  "dose" : "Once daily",
                  "form" : "tablet",
                  "duration" : "30 days",
                  "refills" : "3",
                  "expiration" : "7/3/2012"
              },{
                  "name" : "Prescription name 4",
                  "dose" : "Twice daily",
                  "form" : "capsule",
                  "duration" : "10 days",
                  "refills" : "3",
                  "expiration" : "7/3/2012"
              }],
              "tests" : [{
                  "name" : "Test name 3",
                  "results" : "Blah blah blah, results 3"
              },{
                  "name" : "Test name 4",
                  "results" : "Blah blah blah, results 4"
              }]
          }],
          "questions" : ["When am I going to die?", "Why am I going to die?"]
      }
  
      $scope.prescriptions = [{
              "name" : "Prescription name",
              "dose" : "Once daily",
              "form" : "tablet",
              "duration" : "30 days",
              "refills" : "3",
              "expiration" : "9/1/2014"
          },{
              "name" : "Prescription name 2",
              "dose" : "Twice daily",
              "form" : "capsule",
              "duration" : "60 days",
              "refills" : "3",
              "expiration" : "9/1/2014"
          },{
              "name" : "Prescription name 3",
              "dose" : "Once daily",
              "form" : "tablet",
              "duration" : "30 days",
              "refills" : "3",
              "expiration" : "7/3/2012"
          },{
              "name" : "Prescription name 4",
              "dose" : "Twice daily",
              "form" : "capsule",
              "duration" : "10 days",
              "refills" : "3",
              "expiration" : "7/3/2012"
          }
      ];
  }]);
  </code></pre>