My angularJS app goes into an infinite loop while making an http request to my API inside a for

Question

I have been breaking my head trying to solve this problem, I think that I do understand the "why". But even knowing that I can't make the 'this is why!'.

Well, what I'm trying to do: I want to get the Name of an

User -> with the id of a teacher.

    'users' has Many 'teachers'
    'teachers' belongsTo One 'users'
    'lessons' belongTo One 'teachers'
    'teachers' hasMany 'lessons'

teachers Model =>
   id,
   user_id,
   created_at,
   updated_at

So: In my AngularJS view I want to get all the lessons by the teacher ID. (already DONE)

<div class="col-md-3 card-container-bottom" ng-repeat="lesson in lessons">
    <div class="card">
        <img ng-src="{{lesson.img}}" alt="Avatar" class="card-avatar">
        <div class="card-container">
            <div class="card-title">{{lesson.title}}</div> 
            <div class="card-instructor">{{lesson.teacher_id}}</div>
        </div>
    </div>
</div>

When I have get the lessons, due to the model I only received the teacher_id. (but I want his/her Full name)

In order to solve this, I made another HTTP request to receive the teacher Name and Lastname (from User Model) => if I do it with postman, it works perfectly (because is only one to one). But the main problem occurs when I try to do the same request by angular

As I have been reading, when you make an HTTP request inside a ng-repeat, your app will crushed because it would be updating forever in a bucle.. or something like that (didn't understand that well).

Anyways, I made the following code: in my view:

{{getInstructor()}}

in my controller:

var instructorsID = [];
$scope.getInstructor = function() {
    $scope.instructor.count = $(".card").length;

    for (var i=0; i<$scope.instructor.count; i++) {
        if (!instructoresID.find(x => x.id == $scope.lessons[i]["id"])){
            instructoresID.push({
                cat: $scope.category.id,
                id : $scope.lessons[i]["id"] 
            });
        }
    }
    $scope.instructors = instructorsID;  

this will save all the categories_id and lessons_id of the Lessons shown into view, to the array instructorsID

Now, that I have the category ID and lesson ID of each lesson

    for (var i=0; i<instructoresID.length; i++) {
    lessonService.getInstructorName(instructorsID[i]['cat'], instructorsID[i]['id'])
        .then(
            function(response) {
                var res = response.data.data;
                // alert(res.nombre)
                if (!instructorsID.find(x => x.ins == $scope.lessons[i]["ins"])){
                    instructorsID.push({
                        ins: res.nombre
                    });
                }
            },
            function(){
                alert('error');
                if (!instructorsID.find(x => x.ins == $scope.lessons[i]["ins"])){
                    instructorsID.push({
                        ins: 'error'
                    });
                }
            }
        );
    }

in my service:

.service('lessonService', function ($http) {
   return {
      getInstructorName: function(categoryId, lessonId){
        return $http({
            method: 'GET',
            url: 'http://localhost:3000/api/v1/categories/'+categoryId+'/lessons/'+lessonId+'/teacherName',
            data: lessonId
        });
      }
   }
});

Well, these code will enter into a infinite Loop that will crush your explorer.

So, my question is How can you get these data from your API with angularJS.? Thanks in advance !