Isolate scope variable inside ng-repeat

Question

I'm building a back end for an iOS application and it's made with AngularJS, so the admins can manage the data from this website as they please. The data consists of multiple and diverse elements. One of those elements are, let's say, Boxes. Each Box contains a pointer to a Present, and each Present has a name. So it's something like Box -> Present.name, if you know what I mean.

The problem I'm dealing with is that I need to show the Boxes in a list (don't worry about this in the code example ahead, as I simplified it), and the content of each list item should be the name of the Present that belongs to each Box. The data has to be obtained from Parse.com, so I need to call a function that given a Box retrieves its Present and then allows to get its name.

This is what I have right now:

<div ng-repeat="box in boxes">
    <span ng-init="getPresentFromObject(box)">
        {{relatedPresent.get("name")}}
    </span>
</div>

The problem is obvious. I'm using $scope.relatedPresent to hold the value of each Present (one for each Box), so it's updating its value each iteration and at the end I end with a list of elements, all of them presenting the same name, the one of the last Present, as it is the last to update the $scope.relatedPresent variable.

I'd like that value to be isolated from changes, so each Box has its own Present and the name doesn't vary in other iterations. I tried AngularJS directives but couldn't make them work, so I'm stuck. It must be pretty simple to accomplish this, but I cannot find the way.

Update

The function I call from the ng-init makes an async call, so I'm not sure if I can return that value to an object in the ng-init inside the HTML code.

$scope.getPresentFromObject = function (object) {

    getPresentObjectFromObject(object)
    .then(function (thePresent) {
        $scope.relatedPresent = thePresent;
        // if I return here the value goes nowhere
    },
    function (error) {
        // error stuff
    });

    // if I return here then I lost the value because it's async
}

I hope the flow is clearer now.

Answer 1

Have you tried assigning a value to ng-init?

<div ng-repeat="box in boxes">
    <span ng-init="present = getPresentFromObject(box)">
        {{present.get("name")}}
    </span>
</div>

See ng-init docs for further info

Answer 2

If your data isn't prone to changes once the Presents are loaded, you may consider one-time binding of the relatedPresent variable. It would look like this:

<div ng-repeat="box in boxes">
    <span ng-init="getPresentFromObject(box)">
        {{::relatedPresent.get("name")}}
    </span>
</div>

However, this way you loose all the benefits of updating the model and seeing changes. So this is up to how your app's logic work, if that is a solution.