title: ReferenceError: lecturerFac is not defined
body: <p>When I load the html page, my controller retrieves data from an API end point regarding a course. The page gets populate with the data about the course. But at the same time I want to populate part of the page with data about the lecturer of the course (their image, name , description etc ...). I pass the lecturer name to the method using the ng-init directive but I get a  </p>
  
  <p><strong>ReferenceError: lecturerFac is not defined</strong>.   </p>
  
  <p>I am not sure but I believe the issue is the way I am calling the getLecturer() function using the ng-init directive. </p>
  
  <p>What I want to happen when the page loads is have the Lecturer's details displayed on the page along with the course details. </p>
  
  <p><strong>courses.html</strong></p>
  
  <pre><code>&lt;div class="container"  ng-controller="CoursesDetailsCtrl"&gt;
  
      &lt;div class="row" &gt;
          &lt;div class="col-4" ng-model="getLecturer(courses.lecturer)"&gt;
             &lt;div&gt;
               &lt;h3&gt;{{lecturer.name}}&lt;/h3&gt;
               &lt;&lt;div&gt;
                   &lt;img class="img-circle"  ng-src="{{lecturer.picture}}" alt="" /&gt; 
               &lt;/div&gt;
                  &lt;p&gt;{{lecturer.description}}&lt;/p&gt;  --&gt;
             &lt;/div&gt;
  
          &lt;/div&gt;
          &lt;div class="col-8"&gt; 
              &lt;div class="myContainer" &gt;
                  &lt;h2&gt;{{courses.name}}&lt;/h2&gt;
                  &lt;div class="thumbnail"&gt;
                      &lt;img  ng-src="{{courses.picture}}" alt="" /&gt; 
                  &lt;/div&gt;
                  &lt;div&gt;
                      &lt;p&gt;{{courses.description}}&lt;/p&gt;
                  &lt;/div&gt; 
              &lt;/div&gt;
          &lt;/div&gt; 
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CoursesDetailsCtrl</strong></p>
  
  <pre><code>todoApp.controller('CoursesDetailsCtrl', ['coursesFac','lecturerFac','$scope','$stateParams', function CoursesCtrl(coursesFac, lecturerFac, $scope, $stateParams){
  
  $scope.getLecturer = function(name){
          lecturerFac.getLecturerByName(name)
              .then(function (response) {
                  $scope.lecturer = response.data;
                  console.log($scope.lecturer);
              }, function (error) {
                  $scope.status = 'Unable to load lecturer data: ' + error.message;
                  console.log($scope.status);
              });
      };
  
  }]);
  </code></pre>
  
  <p><strong>lecturerFac</strong></p>
  
  <pre><code>todoApp.factory('lecturerFac', ['$http', function($http) {
  
  var urlBase = '/api/lecturer';
      var coursesFac = {};
  
       lecturerFac.getLecturer = function () {
          return $http.get(urlBase);
       };
  
      lecturerFac.getLecturerByName = function (name) {
          return $http.get(urlBase + '/' + name);
      };
  
      return lecturerFac;
  }]);
  </code></pre>