title: Using Angular $scope variable inside an object
body: <p>I tried searching SO for similar question as mine, but could not get any. Pardon if this question is duplicate and has already been answered.</p>
  
  <p>My HTML has two input fields for First Name and Last Name, and a button:</p>
  
  <pre><code>&lt;body ng-app="myApp" &gt;
    &lt;div ng-controller="myCtrl"&gt;
       &lt;input type="text" ng-model="fname"/&gt;
       &lt;input type="text" ng-model="lname"/&gt;
       &lt;input type="button" ng-click="createObj();" value="Clear Scope"/&gt;
       &lt;p&gt;Fname = {{fname}}&lt;/p&gt;
       &lt;p&gt;Lname = {{lname}}&lt;/p&gt;
   &lt;/div&gt;
  </code></pre>
  
  <p>  </p>
  
  <p>This is my JS file which has the controller function:</p>
  
  <pre><code>var myApp = angular.module("myApp", []);
  myApp.controller("myCtrl",function($scope){
  
     $scope.fname = "sandeep";
     $scope.lname = "nayak";
  
     $scope.createObj= function(){
  
       var obj = {fn:$scope.fname, ln: $scope.lname};
       console.log(obj);
  
       $scope.fname = "";
       $scope.lname = "";
  
       console.log(obj);
  
     };
  
  
  });
  </code></pre>
  
  <p>In <code>createObj</code> method, I create an object which holds the first name and last name, and then I clear the $scope. </p>
  
  <p>I log the object twice, before and after I clear the $scope. But I do not see any difference.</p>
  
  <p>Why is the object still same, even after I clear the $scope, since I refer the $scope in my object?</p>
  
  <p><a href="http://jsfiddle.net/7eo4zcvq/" rel="nofollow">http://jsfiddle.net/7eo4zcvq/</a></p>