title: Angularjs Test Runner - retrieving value of binding
body: <p>I'm a bit new to Angular JS, and I've been doing the tutorial <a href="http://docs.angularjs.org/tutorial/step_08" rel="nofollow">here</a>. I'm stuck on step 8, when the exercise is to write a test that tests whether the thumbnail images were displayed.</p>
  
  <p>The basic idea is this. We have a JSON file called <code>phones/nexus-s.json</code>. In out controller:</p>
  
  <pre><code>phonecatControllers.controller('PhoneDetailCtrl', ['$scope', '$routeParams', '$http',
  function($scope, $routeParams, $http) {
    $http.get('phones/' + $routeParams.phoneId + '.json').success(function(data) {
      $scope.phone = data;
    });
  }]);
  </code></pre>
  
  <p>Okay, great, the phone JSON object gets added to the scope as <code>phone</code>. In our view:</p>
  
  <pre><code>&lt;h1&gt;{{phone.name}}&lt;/h1&gt;
  
  &lt;p&gt;{{phone.description}}&lt;/p&gt;
  
  &lt;ul class="phone-thumbs"&gt;
    &lt;li ng-repeat="img in phone.images"&gt;
      &lt;img ng-src="{{img}}"&gt;
    &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>Great, we iterate over all the phone's image urls.</p>
  
  <p>Now, in the test, I want to retrieve that array of <code>phone.images</code>, look at its length, and make sure that the same number of <code>li</code> items in the rendered html. So my test is:</p>
  
  <pre><code>it('should display the correct thumbnails', function() {
      expect(element(".phone-thumbs li").count()).toBe(repeater('phone.thumbs').length);
  });
  </code></pre>
  
  <p>The problem is, I don't think I have the <code>repeater('phone.thumbs').length</code> part right, and I can't figure out the right way to retrieve the <code>phone.thumbs</code> array, if that's even possible. Would anyone be able to tell me how to do this?</p>
  
  <p>I'd love an explanation that actually explains what's going on here as well - there are a lot of Future object running around and to be honest, I'm not sure how to work with them effectively.</p>