title: AngularJS refresh plain variable
body: <p>I'm trying to understand how AngularJS refreshes the information in the browser. With that purpose, I've written a very simple interface, which rests in an AngularJS logic with one controller and one service.</p>
  
  <p>The interface has two input boxes and three buttons:</p>
  
  <ul>
  <li>The Input boxes work together with the "Add Text" Button. Whatever is in the input boxes, it is concatenated and show in the "Complete Text" line. This result is not shown in the browser until a manually refresh operation is performed.</li>
  <li>"Add One" Button, actually performs three operations:
  
  <ul>
  <li>Each <em>click</em> adds "1" to the current value of the Integer Variable. </li>
  <li>Each <em>click</em> concatenates a "a" to the current String Variable.</li>
  <li>Each <em>click</em> adds "1" to the current value of the Array[0] Variable. </li>
  <li>The operation to the Array Variabler is shown dynamically in the browser, but the other operations are not shown until a manually refresh operation is performed.</li>
  <li>Lastly, The "Refresh Fields" button actually performs the manually refresh operation.</li>
  </ul></li>
  </ul>
  
  <p>I wonder why the variable in the array changes dynamically but the other variable types need a manually operation to load the variable with the current value of the variables in the service.</p>
  
  <p>The html code is:</p>
  
  <pre><code>    &lt;div ng-controller='Refresh as r1'&gt;
    &lt;h3&gt;Variable Refreshing Test&lt;/h3&gt; 
    &lt;input type="text" ng-model='r1.texto' placeholder="Write a Text"&gt;
    &lt;input type="text" ng-model='r1.addtext' placeholder="Write a text to concatenate"&gt;
    &lt;button ng-click='r1.addText();'&gt;Add Text&lt;/button&gt;
    &lt;button ng-click='r1.refreshText();'&gt;Refresh Fields&lt;/button&gt;
    &lt;button ng-click='r1.addOne();'&gt;Add One&lt;/button&gt;
    &lt;div&gt;
      &lt;b&gt;Initial text is:&lt;/b&gt; {{r1.texto}}
      &lt;br&gt;
      &lt;b&gt;Current text to add is:&lt;/b&gt; {{r1.addtext}}
      &lt;br&gt;
      &lt;b&gt;Complete text is:&lt;/b&gt; {{r1.totaltext}}
      &lt;br&gt;
      &lt;b&gt;Integer currently is:&lt;/b&gt; {{r1.Integer}}
      &lt;br&gt;
      &lt;b&gt;String currently is:&lt;/b&gt; {{r1.String}}
      &lt;br&gt;
      &lt;b&gt;Array currently is:&lt;/b&gt; {{r1.Array}}
    &lt;/div&gt;
  </code></pre>
  
  <p>The js code is:</p>
  
  <pre><code>(function() {
      'use strict';
      angular.module('RefreshText', [])
          .controller('Refresh', Refresh)
          .service('Service1', Service1);
  
      function Refresh($scope, Service1) {
          var refresh = this;
          window.MY_SCOPE = refresh;
          window.listScope = $scope;
          refresh.addText = function() {
              var temp = Service1.addText(refresh.texto, refresh.addtext);
          };
          refresh.refresh.Text = function() {
              refresh.totaltext = Service1.getText();
              refresh.Integer = Service1.getInteger();
              refresh.String = Service1.getString();
              refresh.Array = Service1.getArray();
          };
          refresh.Integer = Service1.getInteger();
          refresh.String = Service1.getString();
          refresh.Array = Service1.getArray();
          refresh.addOne = function() {
              Service1.sumaOne();
          };
      }
  
      function Service1() {
          var service = this;
          window.ServiceScope = service;
          var text3;
          var varInteger = 1;
          var varString = "a";
          var varArray = [];
          varArray[0] = 1;
          service.addText = function(text1, text2) {
              text3 = text1 + text2;
              return text3;
          };
          service.getText = function() {
              return text3;
          };
          service.getInteger = function() {
              return varInteger;
          };
          service.getString = function() {
              return varString;
          };
          service.getArray = function() {
              return varArray;
          };
          service.sumaOne = function() {
              varInteger++;
              varString = varString + "a";
              varArray[0]++;
          };
      }
  })();
  </code></pre>
  
  <p>The code I've used for the tests is located here: <a href="https://github.com/harryangstrom/refreshTest.git" rel="nofollow noreferrer">https://github.com/harryangstrom/refreshTest.git</a>.</p>