title: scope behaving differently in angular
body: <p>I am trying to understand scopes in angular.</p>
  
  <pre><code>&lt;html&gt;
  
     &lt;head&gt;
        &lt;title&gt;Angular JS Services&lt;/title&gt;
        &lt;script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"&gt;&lt;/script&gt;
     &lt;/head&gt;
  
     &lt;body&gt;
        &lt;h2&gt;AngularJS Sample Application&lt;/h2&gt;
  
        &lt;div ng-app = "mainApp" ng-controller = "TestController"&gt;
           &lt;p&gt;Enter a number: &lt;input type = "number" ng-model = "number" /&gt;&lt;/p&gt;
           &lt;p&gt;Result using fn: {{resultData()}}&lt;/p&gt;
           &lt;p&gt;Result using var: {{result}}&lt;/p&gt;
        &lt;/div&gt;
  
        &lt;script&gt;
           var mainApp = angular.module("mainApp", []);
  
           mainApp.controller('TestController', function($scope) {
  
               $scope.result = $scope.number * $scope.number;
  
               $scope.resultData = function(){ 
                   console.log("test");
                   return $scope.number *$scope.number;
               }
  
           });
        &lt;/script&gt;
  
     &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Here Result using var is not giving data as expected. Why Result using fn is working correctly and can see 3 times fn get executed. Whats the real reason behind this.</p>
  
  <p>Thanks in advance</p>