title: angularjs angular doesn't read the length of an array
body: <p><br>
  for the passed few days I am struggling with the matter of AngularJS. I am novice at this and that's where my troubles result from.<br>
  Anyway here is my problem. I have an app that is made made for asking users some questions, collecting answers and displaying them to the user.<br>
  The HTML is:</p>
  
  <pre><code>   &lt;div ng-repeat="dialog in dialogWindows"&gt;
                  &lt;div id="{{dialog.idName}}" class="bold abs"&gt;   
                      &lt;div class="questionContainer rel"&gt;
  
  
           &lt;a href=""&gt;&lt;button ng-click="compute()&gt;Fake results&lt;/button&gt;&lt;/a&gt;
  
                          &lt;div ng-repeat="input in dialog.inputs"&gt;
                          &lt;input type="radio" id="{{input.radio}}" name="{{dialog.name}}" value="{{input.value}}"&gt;
                          &lt;label for="{{input.radio}}" class="answer abs {{input.a}}"&gt;{{input.answer}}&lt;/label&gt;
  
  
                          &lt;/div&gt;
                          &lt;/div&gt;
  
  
  
                  &lt;/div&gt;
                  &lt;/div&gt;&lt;!--/ng-repeat--&gt;
               &lt;/div&gt;&lt;!--/ng-controller--&gt;
  </code></pre>
  
  <p>And here is the JS managing the ng-repeat above:</p>
  
  <pre><code>function dialogWindows($scope,localStorageService){
  
      $scope.dialogWindows = [
      {id:0, 
      idName:"pigmentation", 
      number:"1", 
      name:"Pigmentation",
      answer1:"Clear complexion",
      answer2:"Semi-swarthy complexion",
      answer3:"Swarthy complexion",
      answer4:"",
      answer5:"",
      answer6:"",
  
      href:"#hairColor",
      hrefBack:"index.html",
      inputs:[{id:0,a:"a1",answer:"Clear compexion", radio:"radio1",value:"1"},
              {id:1,a:"a3", answer:"Semi-swarthy complexion", radio: "radio2",value:"1"},
              {id:2,a:"a5",answer:"Swarthy complexion",radio:"radio3",value:"1"}
  
              ]
  </code></pre>
  
  <p>Nothing really complicated and so far it works fine. Now you can see that ng-repeat generates three radio buttons. and we have compute function assigned to the button soon you'll see what it does.
  Here is the compute() function:</p>
  
  <pre><code>$scope.compute = function() {
  
  
  
      if (document.getElementById('radio1').checked) {
  
          $scope.a.push(1);
          $scope.b.push(1);
          $scope.c.push(1);
          $scope.d.push(1);
          $scope.e.push(1);
          $scope.f.push(1);
          $scope.g.push(1);
          $scope.h.push(1);
          $scope.i.push(1);
          $scope.j.push(1);
          $scope.k.push(1);
          $scope.l.push(1);
          $scope.m.push(1);
          $scope.n.push(1);
          $scope.o.push(1);
          $scope.p.push(1);
  
      } else if (document.getElementById('radio2').checked) {
  
         $scope.r.push(1);
         $scope.s.push(1);
         $scope.t.push(1);
         $scope.u.push(1);
         $scope.w.push(1);
  
  
      } else if(document.getElementById("radio3").checked){
          $scope.z.push(1);
          $scope.x.push(1);
          $scope.y.push(1);
          $scope.q.push(1);
          $scope.ab.push(1);
  
          }
  </code></pre>
  
  <p>Answered questions are passed to one of 12th arrays responsible for collecting answers.
  JS:</p>
  
  <pre><code>$scope.a= [];
      $scope.b= [];
      $scope.c = [];
      $scope.c= [];
      $scope.d= [];
      $scope.e= [];
      $scope.f= [];
      $scope.g= [];
      $scope.h = [];
      $scope.i= [];
      $scope.j= [];
      $scope.k= [];
      $scope.l= [];
      $scope.m= [];
      $scope.n= [];
      $scope.o= [];
      $scope.p= [];
      $scope.r= [];
      $scope.s= [];
      $scope.t= [];
      $scope.u= [];
      $scope.w= [];
      $scope.z= [];
      $scope.x= [];
      $scope.y= [];
      $scope.q= [];
      $scope.ab= [];
  </code></pre>
  
  <p>Then I wrote a list of elements each one representic one array, that is...</p>
  
  <pre><code>&lt;div ng-repeat="record in records"&gt;
  &lt;a href="{{record.link()}}"&gt;&lt;div class="rel fptsans {{record.className()}}"&gt;{{record.item}}&lt;/div&gt;&lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>ng-repeat is generated with this records array as below:</p>
  
  <pre><code>$scope.records = [
      {id:0, 
      className :  $scope.a.length &gt; 0 ? 'special' : 'normal',    
      item: "a",
      link: $scope.className == "special" ? "a.html" : ''
  
      },
      {id:1,
      className: $scope.b.length &gt; 0 ? 'special' : 'normal',
      item:"b",
      link: $scope.className == "special" ? "b.html" : ''
  
      },
      {id:2,
      className:  $scope.c.length &gt; 0 ? 'special' : 'normal',
      item:"c",
      link: $scope.className == "special" ? "c.html" : ''
      },
  //and so on to 12th.
  </code></pre>
  
  <p>I was sure that every part of the app was consistent but soon I was about to get surprised that Angular doesnt show any results within the ng-repeat="record in records" because it is reffering to an empty objects ($scope.a = []; is in fact empty at initialization), despite that I am able to view the length of an array by simply writing in my html {{a.length}} so apparently the length of an array is increasing.
  My question is how may I use $scope.[some array].length inside my angular array. Should I use ng-model with radio buttons ? would it be helpful ? How can I solve this problem which currently made me stuck in one place.Please help I am really out of solutions. Thank You in advance</p>