title: Angularjs: $filter in controller returned data still tied to original object
body: <p>I'm new to AngularJS and I decided I would start learning by trying to make a family tree app/SPA.
  I hard-coded the data for the family tree, for testing purposes, into $scope.personRegister.
  The first thing I want to do is to properly position all people/nodes from personRegister, loading them one generation at a time, using the ng-style directive.</p>
  
  <p>I use the $filter inside the controller, to return only the people in generation 1000, and store the filtered results in a new object called test. 
  I intend to then pass the data onto a method, outside of the app, to position the nodes.</p>
  
  <p>The problem is, when I manipulate the data inside test, it also manipulates the original data inside $scope.personRegister, so that the also view gets updated.
  Why does this happen?</p>
  
  <pre><code>&lt;!-- borderbox is the subwindow --&gt;
  &lt;div class="borderBox" style="left: 0px; top: 0px" ng-app="famTreeApp"&gt;
  
      &lt;!-- the content of the borderbox --&gt;
      &lt;div class="insideContent" style="left: 100px; top: 0px"&gt;
  
          &lt;div ng-controller="famTree"&gt;
              &lt;div class="personBox" ng-repeat="name in personRegister"
              ng-style="{'left':name.posX+'px', 'top':name.posY+'px' }"&gt;
                  {{name.fName}}
              &lt;/div&gt;
  
          &lt;/div&gt;
  
      &lt;/div&gt;
  
  &lt;/div&gt;
  
  var familyTreeApp = angular.module("famTreeApp", []);
  
  familyTreeApp.controller("famTree", function($scope, $filter, $log) {
  //temp hard-coded data
  $scope.personRegister = [
                             {id:1, genId:1000, gender:'M', fName:'John', momId:4, dadId:3,  posX:'0',  posY:'0' },
                              {id:2, genId:1000, gender:'F', fName:'Lisa', momId:4, dadId:3,  posX:'0',  posY:'0' },
                              {id:3, genId:999, gender:'M', fName:'Mark', momId:6, dadId:5,  posX:'0',  posY:'0' },
                              {id:4, genId:999, gender:'F', fName:'Sarah', momId:8, dadId:7,  posX:'0',  posY:'0' },
                              {id:5, genId:998, gender:'F', fName:'Martha', momId:0, dadId:0,  posX:'0',  posY:'0' },
                              {id:6, genId:998, gender:'M', fName:'James', momId:0, dadId:0,  posX:'0',  posY:'0' },
                              {id:7, genId:998, gender:'M', fName:'Frederick', momId:0, dadId:0,  posX:'0',  posY:'0' },
                              {id:8, genId:998, gender:'F', fName:'Georgiana', momId:0, dadId:0,  posX:'0',  posY:'0' },
                              {id:9, genId:1000, gender:'M', fName:'Trevor', momId:11, dadId:10,  posX:'0',  posY:'0' },      
                              {id:10, genId:999, gender:'M', fName:'Andre', momId:8, dadId:7,  posX:'0',  posY:'0' },
                              {id:11, genId:999, gender:'F', fName:'Teresa', momId:0, dadId:0,  posX:'0',  posY:'0' },
                              {id:12, genId:1000, gender:'F', fName:'Shakira', momId:4, dadId:3,  posX:'0',  posY:'0' }
  ];
  $scope.spouseRegister = [
                              {husbandId:3, wifeId:4, haveKids:1, currMarried:1},
                              {husbandId:6, wifeId:5, haveKids:1, currMarried:0},
                              {husbandId:7, wifeId:8, haveKids:1, currMarried:1},
                              {husbandId:10, wifeId:11, haveKids:1, currMarried:1}
  ];
      $scope.test = $filter('filter')($scope.personRegister, {genId: 1000});
  
      $log.log($scope.personRegister[1]); //message to console
  
  
      $scope.test[1].posX = 50;
      $scope.test[0].fName += 'ny Boy';
  
      $log.log($scope.test[1]); //message to console
      $log.log($scope.personRegister[1]); //message to console
  
      //personPostioner(test);
  
  });
  </code></pre>
  
  <p><a href="http://jsfiddle.net/kq8xduj6/2/" rel="nofollow">http://jsfiddle.net/kq8xduj6/2/</a></p>
  
  <p>Any help would be appreciated.</p>