ReferenceError: lecturerFac is not defined

Question

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

ReferenceError: lecturerFac is not defined.

I am not sure but I believe the issue is the way I am calling the getLecturer() function using the ng-init directive.

What I want to happen when the page loads is have the Lecturer's details displayed on the page along with the course details.

courses.html

<div class="container"  ng-controller="CoursesDetailsCtrl">

    <div class="row" >
        <div class="col-4" ng-model="getLecturer(courses.lecturer)">
           <div>
             <h3>{{lecturer.name}}</h3>
             <<div>
                 <img class="img-circle"  ng-src="{{lecturer.picture}}" alt="" /> 
             </div>
                <p>{{lecturer.description}}</p>  -->
           </div>

        </div>
        <div class="col-8"> 
            <div class="myContainer" >
                <h2>{{courses.name}}</h2>
                <div class="thumbnail">
                    <img  ng-src="{{courses.picture}}" alt="" /> 
                </div>
                <div>
                    <p>{{courses.description}}</p>
                </div> 
            </div>
        </div> 
    </div>
</div>

CoursesDetailsCtrl

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);
            });
    };

}]);

lecturerFac

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;
}]);

Answer 1

i Think the cause of this error is the lecturerFac variable is not initialize in the factory. Create an empty object call lecturerFac in the factory and return it.

todoApp.factory('lecturerFac', ['$http', function($http) {
    var urlBase = '/api/lecturer';
    var coursesFac = {};

    var lecturerFac= {};/////////////////////

    lecturerFac.getLecturer = function() {
        return $http.get(urlBase);
    };
    lecturerFac.getLecturerByName = function(name) {
        return $http.get(urlBase + '/' + name);
    };
    return lecturerFac;
}]);

Also avoid calling functions inside the ng-model. When you bind something with ng-model it must be available for both reading and writing - e.g. a property/field on an object. use ng init instead