title: AngularJS add variable to scope problems
body: <p>I am working on a more complex project(10000+ LoC) and during development I encountered a problem very often. </p>
  
  <p>When I add a simple variable to scope like:
  $scope.editing = true;</p>
  
  <pre><code>   $sope.editing=false;
  
     $scope.changeTextButtonClicked = function() {
           $scope.editText;
     } 
  </code></pre>
  
  <pre class="lang-html prettyprint-override"><code>   &lt;span ng-hide="editing"&gt;{{editText}}&lt;/span&gt;
     &lt;input type="text" ng-model="editText" ng-show="editing"&gt;
     &lt;input type ="button" ng-click="changeTextButtonClicked()"&gt;
  </code></pre>
  
  <p>The current value of <code>$scope.editText</code> can't be accessed from the controllers javascript code! 
  In some cases I got the old value when accessing <code>$scope.editText</code> like the DOM is not updated but when printing it directly on the website with <code>{{editText}}</code> it works and gets updated but in the controller I get the old value.</p>
  
  <p>It happened that I have one value for <code>{{editText}}</code> on the website and another value for <code>$scope.editText</code> in the controller (invalid one - previous).</p>
  
  <p>I solved this with adding it to a data array or any other array that is nested inside the scope:</p>
  
  <pre><code>     $scope.data={}
       $scope.data.editText = ...;
  </code></pre>
  
  <p>Can anybody explain to me why it works sometimes with <code>$scope.variable</code> and sometime it doesn't and you need to add <code>$scope.**foobar**.variable</code>?</p>