Changes on the view is not reflected in ng-click's event
<p>So I have this HTML:</p>

<pre><code>&lt;body ng-app="calculator" ng-controller="calculatorCtrl"&gt;
      &lt;input type="text" ng-model="num1" /&gt;
      &lt;input type="text" ng-model="num2" /&gt;
      &lt;button ng-click="add()"&gt;Add&lt;/button&gt;
      &lt;label&gt;{{result}}&lt;/label&gt;
&lt;/body&gt;
</code></pre>

<p>and this JS:</p>

<pre><code>angular.module('calculator', [])

.controller('calculatorCtrl', function($scope){
    $scope.num1 = 0;
    $scope.num2 = 0;
    $scope.result = 0;
    $scope.add = function(){
        console.log($scope.num1);
        console.log($scope.num2);
        $scope.result = parseInt($scope.num1) + parseInt($scope.num2);
        console.log($scope.result);
    };
});
</code></pre>

<p>In my controller, I have 3 variables, <code>num1</code>, <code>num2</code>, and <code>result</code>. Plus, I have a function named <code>add</code>. The function should change <code>result</code> value into <code>num1+num2</code>.</p>

<p>I bind the function to button click event by using <code>ng-click</code> property.
I also bind <code>num1</code>, <code>num2</code>, and <code>result</code> to their respective components.</p>

<p>However, I find that <code>num1</code> and <code>num2</code>'s values are always zero. Below is the the result of console.log:</p>

<pre><code>0
0
0
</code></pre>

<p>I know I can change the HTML into this:</p>

<pre><code>&lt;body ng-app="calculator" ng-controller="calculatorCtrl"&gt;
      &lt;input type="text" ng-model="num1" /&gt;
      &lt;input type="text" ng-model="num2" /&gt;
      &lt;label&gt;{{parseInt(num1)+parseInt(num2)}}&lt;/label&gt;
&lt;/body&gt;
</code></pre>

<p>And it is going to work perfectly.</p>

<p>But I'm still confused, why is the first approach doesn't work?</p>

<p><strong>EDIT:</strong> This seems to have something to do with ionic framework. I deleted the irrelevant codes in order to let everyone focus on where I thought the problem is. Apparently I was wrong. So here again the working code and the not working code:</p>

<p><strong>This doesn't work:</strong></p>

<pre><code>angular.module('calculator', ['ionic'])

.run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {
    if(window.cordova &amp;&amp; window.cordova.plugins.Keyboard) {
      // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
      // for form inputs)
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);

      // Don't remove this line unless you know what you are doing. It stops the viewport
      // from snapping when text inputs are focused. Ionic handles this internally for
      // a much nicer keyboard experience.
      cordova.plugins.Keyboard.disableScroll(true);
    }
    if(window.StatusBar) {
      StatusBar.styleDefault();
    }
  });
})

.controller('calculatorCtrl', function($scope){
    $scope.num1 = 0;
    $scope.num2 = 0;
    $scope.result = 0;
    $scope.add = function(){
        console.log($scope.num1);
        console.log($scope.num2);
        $scope.result = parseInt($scope.num1) + parseInt($scope.num2);
        console.log($scope.result);
    };
});
</code></pre>

<p><strong>This works:</strong></p>

<pre><code>angular.module('calculator', [])
.controller('calculatorCtrl', function($scope){
    $scope.num1 = 0;
    $scope.num2 = 0;
    $scope.result = 0;
    $scope.add = function(){
        console.log($scope.num1);
        console.log($scope.num2);
        $scope.result = parseInt($scope.num1) + parseInt($scope.num2);
        console.log($scope.result);
    };
});
</code></pre>

<p>The question is now: What's wrong with ionic?</p>

<p><strong>UPDATE AGAIN:</strong></p>

<p>I don't know exactly, but seems that it will works if I put the variables as object property. This works perfectly with ionic:</p>

<p><strong>index.html</strong></p>

<pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
  &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"&gt;
    &lt;title&gt;&lt;/title&gt;

    &lt;link href="lib/ionic/css/ionic.css" rel="stylesheet"&gt;
    &lt;link href="css/style.css" rel="stylesheet"&gt;

    &lt;!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
    &lt;link href="css/ionic.app.css" rel="stylesheet"&gt;
    --&gt;

    &lt;!-- ionic/angularjs js --&gt;
    &lt;script src="lib/ionic/js/ionic.bundle.js"&gt;&lt;/script&gt;

    &lt;!-- cordova script (this will be a 404 during development) --&gt;
    &lt;script src="cordova.js"&gt;&lt;/script&gt;

    &lt;!-- your app's js --&gt;
    &lt;script src="js/app.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body ng-app="calculator" ng-controller="calculatorCtrl"&gt;

    &lt;ion-pane&gt;
      &lt;ion-header-bar class="bar-stable"&gt;
        &lt;h1 class="title"&gt;Calculator&lt;/h1&gt;
      &lt;/ion-header-bar&gt;
      &lt;ion-content&gt;
          &lt;label class="item item-input"&gt;
              &lt;input type="text" ng-model="data.num1" /&gt;
          &lt;/label&gt;
          &lt;label class="item item-input"&gt;
              &lt;input type="text" ng-model="data.num2" /&gt;
          &lt;/label&gt;
          &lt;button class="button button-block button-positive" ng-click="add();"&gt;Add&lt;/button&gt;
          &lt;label&gt;{{data.result}}&lt;/label&gt;
      &lt;/ion-content&gt;
    &lt;/ion-pane&gt;
  &lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p><strong>app.js</strong></p>

<pre><code>// Ionic Starter App

// angular.module is a global place for creating, registering and retrieving Angular modules
// 'starter' is the name of this angular module example (also set in a &lt;body&gt; attribute in index.html)
// the 2nd parameter is an array of 'requires'
angular.module('calculator', ['ionic'])

.run(function($ionicPlatform) {
    $ionicPlatform.ready(function() {
        if(window.cordova &amp;&amp; window.cordova.plugins.Keyboard) {
            // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
            // for form inputs)
            cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);

            // Don't remove this line unless you know what you are doing. It stops the viewport
            // from snapping when text inputs are focused. Ionic handles this internally for
            // a much nicer keyboard experience.
            cordova.plugins.Keyboard.disableScroll(true);
        }
        if(window.StatusBar) {
            StatusBar.styleDefault();
        }
    });
})

.controller('calculatorCtrl', function($scope){
    $scope.data = {
        num1 : 0,
        num2 : 0,
        result : 0,
    }
    $scope.add = function(){
        $scope.data.result = parseInt($scope.data.num1) + parseInt($scope.data.num2);
    }
});
</code></pre>

<p><strong>New Question:</strong></p>

<p>Why this one works, while the old one doesn't?</p>