Angular.js: Why does array element equal null only when using a factory?

Question

Trying to wrap my head around why this is not working. When I have my $http.get in my controller, I can convert the number stored in the JSON file to a array element like so:

$http.get('weapon.json').success(function(data) {
    $scope.weapons = data;

    for(i=0, len=$scope.weapons.length; i < len; i++){
        $scope.weapons[i].ele = $scope.elementType[$scope.weapons[i].ele];
    }
});

But when I try and move my $http.get into a factory, $scope.weapons[i].ele equal null instead of the array element.

.factory('WeaponData', function($http){
    return $http.get('weapon.json');
})

.controller('BL2Ctrl', function($scope,WeaponData) {
    WeaponData.success(function(data) {
        $scope.weapons = data;

        for(i=0, len=$scope.weapons.length; i < len; i++){
            $scope.weapons[i].ele = $scope.elementType[$scope.weapons[i].ele];
        }
    });
})

here is a Plunker where it doesn't work

Answer 1

The problem is that your controller is being instantiated 3 times. Therefore, its constructor is being run 3 times and the data returned from your $http.get is being updated 3 times (since you set up the success handler 3 times). After the first time, it has the values you are wanting; the 2, 3, and 3 are replaced with the respective objects from your elementType list. The problem is that the second and third times the success handler is called, the list is updated again, but ele attribute has already been overwritten. Therefore, it gets updated to undefined because there is no property of the elementType object which matches the key [object Object] (or whatever the string value ends up being). There are a few ways to solve this:

1. Create a larger factory and push the update to weapon[i].ele into the factory. http://plnkr.co/edit/CSv3ZRSL9K3bOcc9fcMJ
2. Use elementType[weaponStats.ele] in the view, rather than updating the model. http://plnkr.co/edit/UqVz88hVvNATO42A2Aew
3. Update a different attribute (e.g. eleType) instead of overwriting ele. This will prevent you from losing the value loaded from the JSON. (You'll still be updating the objects 3 times.) http://plnkr.co/edit/EqbXUT6gCthtGbC7VQHO

On a separate note, I noticed that you are binding the controller to one of the <div>s around the ng-repeat, but you also declare that the controller for the weaponblock directive is the same controller. This means you're redoing all of that work for each directive even though you don't need to. Here is a partial rewrite which splits up the single controller you had into 1 controller to set up the data and a separate controller to set up the functions for the directive: http://plnkr.co/edit/6NpcuZLJutdC9rtwhJXd