Despite numerous attempts, I am struggling to find a solution that works for me. In my Courses controller, I am using the Students service and Staff service to access my staff and student objects. My goal is to retrieve the staffs and students objects in order to access their name properties for display purposes. The course object only contains an array that stores staffIDs and StudentIDs. While my staff services work correctly, I encounter an error with the student service. I am attempting to compile a list of all students and staff registered for the course. Any suggestions for a cleaner implementation of my code would be greatly appreciated.

The Course Controller

(function () {
  'use strict';

  // Courses controller
 angular
.module('courses')
.controller('CoursesController', CoursesController);

CoursesController.$inject =   ['$scope','StaffsService','StudentsService','$state','$filter', 'Authentication', 'courseResolve'];

function CoursesController   ($scope,StaffsService,StudentsService,$state,$filter, Authentication, course) {
var vm = this;

vm.authentication = Authentication;
vm.course = course;
vm.error = null;
vm.form = {};
vm.remove = remove;
vm.save = save;
//Array of filtered staff
var temp = [];
$scope.liststaff = []; 
//List of all   
StaffsService.query(function(resource){
$scope.liststaff = resource;
for(var i = 0; i < $scope.liststaff.length; i++){
  if(vm.course.staff == undefined){
        vm.course.staff = [];
    }
if(vm.course.staff.indexOf($scope.liststaff[i]._id) > -1){
  $scope.liststaff[i].checked = true;
    }
  }
});

  $scope.coursesStaff = []; 
  $scope.coursesStudent = [];

//get staff courses object to get course title
if(vm.course.staff!=undefined){
 for ( var i = 0; i < vm.course.staff.length; i++) { 
     $scope.coursesStaff[i] = StaffsService.get({ staffId:    vm.course.staff[i] });     
  }
}

//Get list of students taking this course
 if(vm.course.student!=undefined){
  for ( var i = 0; i < vm.course.student.length; i++) { 
     var some = StudentsService.get({ student_Id: vm.course.student[i] });
     console.log(some);
      $scope.coursesStudent[i] = some;
  }
}


 //Filter for assigning staff to this course
 $scope.selectedStaff = function () {
    temp = $filter('filter')($scope.liststaff,({checked: true}));    
 }

// Remove existing Course
function remove() {
  if (confirm('Are you sure you want to delete?')) {

    if($scope.coursesStudent != undefined){

      for(var i = 0; i < $scope.coursesStudent.length; i++){
      var index = $scope.coursesStudent[i].course.indexOf(vm.course._id);
      $scope.coursesStudent[i].course.splice(index,1);
      var temp = $scope.coursesStudent[i];
      var id = vm._id
      StudentsService.update({id:id},temp);
      }
    }

    if($scope.coursesStaff != undefined){

      for(var i = 0; i < $scope.coursesStaff.length; i++){
      var index = $scope.coursesStaff[i].courses.indexOf(vm.course._id);
      $scope.coursesStaff[i].courses.splice(index,1);
      var temp = $scope.coursesStaff[i];
      var id = vm._id
      StaffsService.update({id:id},temp);
      }
    }
    vm.course.$remove($state.go('courses.list'));
  }
}

// Save Course
function save(isValid) {
  if (!isValid) {
    $scope.$broadcast('show-errors-check-validity', 'vm.form.courseForm');
    return false;
  }

  // TODO: move create/update logic to service
  if (vm.course._id) {
    vm.course.$update(successCallback, errorCallback);
  } else {
    vm.course.$save(successCallback, errorCallback);
  }

    for ( var i = 0; i < $scope.liststaff.length; i++) {  
    if($scope.liststaff[i].checked == true){    
      if(vm.course.staff == undefined){
        vm.course.staff = [];
      }
      if(vm.course.staff.indexOf($scope.liststaff[i]._id) == -1){

          vm.course.staff.push($scope.liststaff[i]._id); 
          var temp = $scope.liststaff[i];
          temp.courses.push(vm.course._id);
          var id = $scope.liststaff[i]._id;
          StaffsService.update({id:id},temp);
        }

      }
      //remove items tht were unchecked from parent object
      else{
        var index = vm.course.staff.indexOf($scope.liststaff[i]._id)
        if (index > -1) {
            vm.course.staff.splice(index, 1);
            var nuindex = $scope.liststaff[i].courses.indexOf(vm.course._id);
            $scope.liststaff[i].courses.splice(nuindex,1);
            var id = $scope.liststaff[i]._id;
            var temp = $scope.liststaff[i];
            StaffsService.update({id:id},temp);
        }

      } 
    }

  function successCallback(res) {
    $state.go('courses.view', {
      courseId: res._id
    });
  }

  function errorCallback(res) {
    vm.error = res.data.message;
      }
    }
     }
      })();

Student Service

 (function () {
      'use strict';

      angular
        .module('students')
        .factory('StudentsService', StudentsService);

      StudentsService.$inject = ['$resource'];

      function StudentsService($resource) {
        return $resource('api/students/:studentId', {
          studentId: '@_id'
        }, {
          update: {
            method: 'PUT'
          }
        });
      }
    })();

Staff Service

    (function () {
      'use strict';

      angular
        .module('staffs')
        .factory('StaffsService', StaffsService);

      StaffsService.$inject = ['$resource'];

      function StaffsService($resource) {
        return $resource('api/staffs/:staffId', {
          staffId: '@_id'
        }, {
          update: {
            method: 'PUT'
          }
        });
      }
    })();

HTML for output

    <section>
      <div class="page-header">
        <h1 data-ng-bind="vm.course.title"></h1>
      </div>
      <div class="pull-right"
           data-ng-show="vm.course.isCurrentUserOwner">
        <a class="btn btn-primary"
           data-ui-sref="courses.edit({ courseId: vm.course._id })">
          <i class="glyphicon glyphicon-edit"></i>
        </a>
        <a class="btn btn-primary" data-ng-click="vm.remove()">
          <i class="glyphicon glyphicon-trash"></i>
        </a>
      </div>
     <h3>Student</h3>
     <div class="list-group">
        <a data-ng-repeat="student in coursesStudent"
           data-ui-sref="students.view({ studentId: student._id })"
           class="list-group-item" >

          <h4 class="list-group-item-heading">{{student.name}}</h4>
        </a>
      </div>
     <h3>Staff</h3>
     <div class="list-group">
        <a data-ng-repeat="staff in coursesStaff"
           data-ui-sref="staffs.view({ staffId: staff._id })"
           class="list-group-item">

          <h4 class="list-group-item-heading" data-ng-bind="staff.firstname"></h4>
        </a>
      </div>

      <small>
        <em class="text-muted">
          Posted on
          <span data-ng-bind="vm.course.created | date:'mediumDate'"></span>
          by
          <span data-ng-if="vm.course.user"
                data-ng-bind="vm.course.user.displayName"></span>
          <span data-ng-if="!vm.course.user">Deleted User</span>
        </em>
      </small>
      <p class="lead" data-ng-bind="vm.course.content"></p>
    </section>