Copy Array to Object in Object with Angular

Question

I'm learning Angular and I'm doing some example to understand angular.copy. What I want to do is create an Object with a Service, and then create a new Object which contains some element of the Service's Object.

Full code example: HERE

This is the "Data" Object of the Service:

return {
    name: "hello",
    toys: ["asd", "lol"],
    food: ["apple"],
    phones: ["samsung", "lg", "iphone"]
};

In the Controller I copy the Object, create a new one, and copy into it just some element of the old Object:

$scope.oldData = angular.copy(Data);
$scope.newData = {};

$scope.newData.name = oldData.name;

$scope.newData.toys = oldData.toys;

$scope.newData.phones = oldData.phones;

What I expect is that the user display just three elements: the name, the toys array and the phones array:

    <h1>{{newData.name}}</h1>

<h1>Toys:</h1>
<ul>
  <li ng-repeat="toy in newData.toys">{{ toy }}</li>
</ul>


<h1>Phones:</h1>
<ul>
  <li ng-repeat="phone in newData.phones">{{ phone }}</li>
</ul>

Why does it not work? What am I doing wrong?

Answer 1

oldData is scope variable, not normal javascript variable.

$scope.oldData

instead of

oldData

Code

$scope.oldData = angular.copy(Data);
$scope.newData = {};

$scope.newData.name = $scope.oldData.name;

$scope.newData.toys = $scope.oldData.toys;

$scope.newData.phones = $scope.oldData.phones;

---

Or either way you could make it var oldData

Demo