title: angularjs scope hierarchy or why can't i see the a scope variable?
body: <p>probably a rocky question but nonetheless, i'd like to understand the reason for that.</p>
  
  <p>I have an input field like so:</p>
  
  <pre><code>&lt;div&gt;
      &lt;label class="col-xs-2" for="selectedJdeEsu"&gt;{{"JDE.jde_wizard.esu_name" | translate}}&lt;/label&gt;
      &lt;input ng-model="selectedEsu" type="text/&gt;
      &lt;div class = "btn wizard-next btn-primary" ng-click="addCurrent(selectedEsu)"&gt;
          &lt;i class="fa fa-plus-circle" aria-hidden="true" &gt;&lt;/i&gt;
          add
      &lt;/div&gt;
      &lt;div ng-show="esuNameErr" style="color: red"&gt;
          {{esuNameErr}}
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and angularJS like so:</p>
  
  <pre><code>    $scope.addCurrent = function(curr){
          var found = false;
  
          for(var i = 0 ; i &lt; $scope.jdeEsus.length ; i++){
              if($scope.jdeEsus[i].esuName === $scope.selectedEsu){
                  $scope.selectedEsuList.push($scope.jdeEsus[i]);
                  $scope.selectedEsu = '';
                  $scope.esuNameErr = null;
                  found = true;
                  break;
              }
          }
  
          if(found == false &amp;&amp; $scope.selectedEsu){
              $scope.esuNameErr = $filter('translate')('JDE.jde_wizard.esu_name_err')
          }
      };
  </code></pre>
  
  <p><code>$scope.jdeEsus</code> is an array of objects.
  now my problem is that while in the loop <code>$scope.selectedEsu</code> is undefined, while <code>curr</code> gets the right value, even though it comes from the same source.</p>
  
  <p>I want to know why?</p>