Property on $scope undefined

[svoltmer1]

I am using angular 1.5.6, only because I inherited a project with it and don’t have time to convert it. That being said I have a JSON object for data and an app controller for creating an array of searchable “courses”. One of the properties of a course object is “gradStudiesEligable”, and I have a checkbox that on ng-click calls a function in the controller to filter the courses by whether the property, gradStudiesEligible has the value of “Yes”. The script is working, but on-click always throws a TypeError: Cannot read properties of undefined (reading ‘gradStudiesEligible’) even though I have an if statement that should make sure that the $scope.gradStudiesEligible is only used if not undefined. Any suggestions are welcome! (The other property $scope.gradStudies is the model attached to the checkbox)

$scope.gradStudiesEligible = function(course) {
        if($scope.gradStudies != undefined && $scope.gradStudies != false) {
            if(course.gradStudiesEligible != undefined){
                if(course.gradStudiesEligible == 'Yes'){
                return course;
                }
            }
        } else {
            return course;
        }
    }

And a section of the HTML:

<div class="catalog-header col-xs-12">
                <h2>Academic Catalog</h2>
                <div class="program-link-mobile">
                <a href="#programs-anchor">Programs of Study</a>
                <a href="#course-descriptions-anchor">Course Descriptions</a>
                </div>
                <div class="col-xs-12 menu-dropdown">
                <div class="col-xs-12 col-md-8 col-lg-8">
                    <label for="courseSubjects">Search by Subject:</label>
                    <select id="courseSubjects" class="angularFilter" ng-model="subjectSelect" ng-options="subject for subject in allSubjects" ng-change="changeHandler()">
                      <option value="">All Subjects</option>
                    </select>
                    <select title="Filter Courses" aria-label="Filter Courses" class="angularFilter" ng-model="courseSelect" ng-options="course.num for course in courses | filter : courseFilter" ng-change="changeHandler()">
                      <option value="">All Courses</option>
                    </select>
                    </div>
                    <div class="col-xs-12 col-md-4 col-lg-4"> 
                        <label for="courseTextSearch">Course Search:</label>
                        <input id="courseTextSearch" class="text-search" name="query" type="text" value="" ng-model="courseTextSearch" placeholder="Search by keywords"/> 
                    </div>
                    <div class="gradStudiesCheckbox"> 
                        <label for="gradStudiesEligible">Graduate Studies Eligible</label>
                        <input id="gradStudies" class="checkbox" name="gradcheck" type="checkbox" value="" ng-model="gradStudies" ng-click="gradStudiesEligible(course)"/> 
                    </div> 
                </div>
            </div>
            <div class="col-xs-12 col-md-8 col-lg-8 catalog-default">
                #if($currentPage.getStructuredDataNode("page-text").textValue.length() > 0)
                    $currentPage.getStructuredDataNode("page-text").textValue<br/><br/>
                #end
                <div id="search-results">
                    <h3>Courses</h3>
                    <ul class="ng-cloak" id="courses">
                        <li dir-paginate="course in filteredCourses = (courses | filter : { num : courseSelect.num } | filter : courseFilter | filter: courseTextSearch) | filter: gradStudiesEligible | itemsPerPage: pageSize" current-page="pagination.current">
                            <a href="{{ course.link }}" target="_blank" title="{{ course.path }} opens in a new window."><span class="abbrev">{{ course.num }}</span> {{ course.name }}</a>
                        </li>
                    </ul>
                    <p ng-show="!filteredCourses.length">No match found.</p>
                </div>
                <div class="pagePagination">
                    <dir-pagination-controls max-size="5" direction-links="true">&#160;</dir-pagination-controls>
                </div>
                <div class="col-xs-12 col-md-12 col-lg-12 course-desc">
                <a id="course-descriptions-anchor"></a>
                <h3 class="desc-header">Course Descriptions</h3>
                <ul id="descriptions">
                #foreach( $description in $allDescriptions)
                    #if($description.getChild("title").value)
                        #set( $dName = $description.getChild("title").value)
                        #set( $dName = $_StringTool.substringBefore($dName, " -"))
                    #elseif($description.getChild("display-name").value)
                        #set($dName = $description.getChild("display-name").value)
                    #end
                    #set( $dLink = $description.getChild("link").value )
                    <li><span class="desc_name"><a href="${dLink}" target="_parent">${_EscapeTool.xml($dName)}</a></span></li> 
                #end
                </ul>
            </div>
            </div>