$http.get() loops with ngrepeat - angularjs

Question

I have 2 entities as below
person {
personID,
personName,
Array of Cars (Person Car)
}
Cars {
carID,
carName
}
And then the relational entity for Person-Car as below
PersonCar {
personID,
CarID,
relatedProperty1,
relatedProperty2
}
Now, to represent this on data on a HTML page, I'm doing the below
<div class="row" ng-repeat="person in persons">
<div class="col-xs-6">
{{person.personID}} - {{person.personName}}
</div>
<div class="col-xs-6">
<div class="row">
<div class="col-xs-12" ng-repeat="car in cars">
{{person.carID}} - {{getCarName(person.carID)}} -
{{person.relatedProperty1}} - {{person.relatedProperty2}}
</div>
<!-- Each Car-->
</div>
<!-- Array of Cars-->
</div>
<!-- Array of Cars Section -->
</div>
<!-- Person Row-->
Further, the data is being retrieved as below
modelInfo.controller('modelInfoController', function ($scope, $http, $filter) {
$http.get('http://localhost/person/123').
success(function(data) {
$scope.persons = data
}
$scope.getCarName = function(carID) {
$http.get('http://localhost/car/54545').
success(function(data) {
$scope.persons = data.carName
}
}
};
For some unknown reason, the script loops infinitely over the getCarName function. Please help me understand the issue. Also, please let me know if this is a good REST architecture.

Answer 1

You were missing a couple closing parenthesizes
modelInfo.controller('modelInfoController', function ($scope, $http, $filter) {
$http.get('http://localhost/person/123').success(
function(data) {
$scope.persons = data
}
); // <-- here, closing success function call
$scope.getCarName = function(carID) {
$http.get('http://localhost/car/54545').success(
function(data) {
$scope.persons = data.carName;
}
); // <-- here too
};
}); // <-- and here, closing the controller call
As for REST, it depends on how your backend server endpoints are defined
Although on the client side, you could define services for your resources, i.e. a wrapper for $http with REST methods (get, put, delete, update)