title: Simple sum function works in jsfiddle but not on Ionic what am I missing?
body: <p>Hey guys so I have the following code it's a simple sum function which gets 3 values from html and adds them, it works just fine on jsfiddle:</p>
  
  <p><strong>app.js</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>angular.module('calculator', [])
  
   
  //=========================================================================
  
  
    .controller('CalculatorCtrl', function ($scope) {
  
      $scope.a = 1;
      $scope.b = 1;
      $scope.x = 1;
  
      $scope.result = function () {
  
        var answer = 0;
  
        answer =  $scope.a + $scope.b + $scope.x;
  
        return answer;
  
      }
  
    });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"&gt;&lt;/script&gt;
  &lt;div id="calculator-div"  ng-app="calculator" ng-controller="CalculatorCtrl"&gt;
  
        &lt;div class="row"&gt;
          &lt;div class="col" id="calculator-title"&gt;Calcular Y&lt;/div&gt;
        &lt;/div&gt;
  
        &lt;div class="row"&gt;
  
          &lt;div class="col"&gt;
            &lt;label class="item item-input item-floating-label"&gt;
              &lt;input type="number" placeholder="{{a}}" ng-model="a"&gt;
            &lt;/label&gt;
          &lt;/div&gt;
  
          &lt;div class="col col-10 ion-arrow-right-b"&gt;&lt;/div&gt;
  
          &lt;div class="col"&gt;
            &lt;label class="item item-input item-floating-label"&gt;
              &lt;input type="number" placeholder="{{x}}" ng-model="x"&gt;
            &lt;/label&gt;
          &lt;/div&gt;
  
        &lt;/div&gt;
  
        &lt;div class="row"&gt;
  
          &lt;div class="col"&gt;
            &lt;label class="item item-input item-floating-label"&gt;
              &lt;input type="number" placeholder="{{b}}" ng-model="b"&gt;
            &lt;/label&gt;
          &lt;/div&gt;
  
          &lt;div class="col col-10 ion-arrow-right-b"&gt;&lt;/div&gt;
  
          &lt;div class="col"&gt;
            &lt;label class="item item-positive item-floating-label" id="result"&gt;
              {{result()}}
            &lt;/label&gt;
          &lt;/div&gt;
  
        &lt;/div&gt;
      &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>This is my code in Ionic:
  <strong>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;!-- 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-content&gt;
  
      &lt;div class="row"&gt;
        &lt;div class="col description"&gt;En la regla de tres, se establece la relación de proporcionalidad entre dos
          valores conocidos, por ejemplo: A y B, y conociendo un tercer valor X, podemos calcular un cuarto valor Y.
        &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div id="calculator-div"&gt;
  
        &lt;div class="row"&gt;
          &lt;div class="col" id="calculator-title"&gt;Calcular Y&lt;/div&gt;
        &lt;/div&gt;
  
        &lt;div class="row"&gt;
  
          &lt;div class="col"&gt;
            &lt;label class="item item-input item-floating-label"&gt;
              &lt;input type="number" placeholder="{{a}}" ng-model="a"&gt;
            &lt;/label&gt;
          &lt;/div&gt;
  
          &lt;div class="col col-10 ion-arrow-right-b"&gt;&lt;/div&gt;
  
          &lt;div class="col"&gt;
            &lt;label class="item item-input item-floating-label"&gt;
              &lt;input type="number" placeholder="{{x}}" ng-model="x"&gt;
            &lt;/label&gt;
          &lt;/div&gt;
  
        &lt;/div&gt;
  
        &lt;div class="row"&gt;
  
          &lt;div class="col"&gt;
            &lt;label class="item item-input item-floating-label"&gt;
              &lt;input type="number" placeholder="{{b}}" ng-model="b"&gt;
            &lt;/label&gt;
          &lt;/div&gt;
  
          &lt;div class="col col-10 ion-arrow-right-b"&gt;&lt;/div&gt;
  
          &lt;div class="col"&gt;
            &lt;label class="item item-positive item-floating-label" id="result"&gt;
              {{result()}}
            &lt;/label&gt;
          &lt;/div&gt;
  
        &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="row"&gt;
  
        &lt;div class="col"&gt;
  
          &lt;p&gt;Si necesito {{x}} zanahorias para alimentar {{a}} conejos, ¿cuántas zanahorias necesito para
          alimentar {{b}} conejos?&lt;/p&gt;
  
          A= {{a}}
          B= {{b}}
          X= {{x}}
        &lt;/div&gt;
      &lt;/div&gt;
  
    &lt;/ion-content&gt;
  
  &lt;/ion-pane&gt;
  
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>This is how my <strong>app.js</strong> looks like:</p>
  
  <pre><code>angular.module('calculator', ['ionic'])
  
    .run(function ($ionicPlatform) {
      $ionicPlatform.ready(function () {
        // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
        // for form inputs)
        if (window.cordova &amp;&amp; window.cordova.plugins.Keyboard) {
          cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
        }
        if (window.StatusBar) {
          StatusBar.styleDefault();
        }
      });
    })
  
  //=========================================================================
  
  
    .controller('CalculatorCtrl', function ($scope) {
  
      $scope.a = 0;
      $scope.b = 0;
      $scope.x = 0;
  
      $scope.result = function () {
  
        var answer = 0;
  
        answer =  $scope.a + $scope.b + $scope.x;
  
        return answer;
  
      }
  
    });
  </code></pre>
  
  <p>I'm totally clueless why it works in jsfiddle but not in Ionic please help this is how my app looks:
  <a href="https://i.stack.imgur.com/z1wmO.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/z1wmO.png" alt="enter image description here"></a></p>