In the controller function, we call testimonialsService.getTestimonials. When getTestimonials resolves, we create a scope variable, testimonials, with the value of the response. If the Promise does not resolve, we output an error to the console. With this, our directive has a list of testimonials before it renders, as the controller is the first step of the directive life cycle. Now, let's write the testimonials template.

Create src/app/templates/testimonials.html with the following content:

    <div class="myphoto-testimonials-grid animated fadeIn" data-columns>
        <div ng-repeat="testimonial in testimonials track by $index" 
        class="myphoto-testimonial-column hvr-grow-shadow hvr-sweep-to
        -top">
            <h6>{{testimonial.name}}</h6>
            <p>{{testimonial.message}}</p>
        </div>
    </div>

That's it. Compare this to the hard-coded version and note the difference in the amount of HTML we wrote. So, what is going on here? Well, we took the raw HTML for the testimonial component and removed the individual testimonial elements. We then added a new attribute, ng-repeat, to the myphoto-testimonials-column  div element. The ng-repeat attribute is actually an AngularJS directive itself. The ng-repeat attribute loops through the data passed to it, repeatedly adding the element that is an attribute of the DOM. We give ng-repeat the value of "testimonial in testimonials track by $index". Simply, we are saying repeat this element for every entry in the testimonials property of the directive's scope, giving each value the reference testimonial. We are also telling ng-repeat to track each entry by $index, which is the position of the entry in testimonials. Using track by has great performance benefits for ng-repeat. Without track by, AngularJS will only identify the entries by its own built-in unique identifier, $id. If the data used for the entries is reloaded, AngularJS will recreate each DOM element in the list again. Using track by $index allows AngularJS to just reuse the entries, as it now knows which DOM elements need to be recreated and which can be reused. One caveat with using $index for tracking is that AngularJS will expect the reloaded data to be in the same order. You can use any property of the entry with track by. For example, if each object in testimonials.json had an id property, we could use track by testimonial.id. Within the myphoto-testimonial-column div, we create a h6 and p element, just like the raw HTML testimonial markup. Instead of hard-coding values, we use the reference to the entries in the testimonials array, testimonial, provided by ng-repeat. Using testimonial along with handlebar notation, we can access the properties of each entry as ng-repeat loops through testimonials. As we loop through, AngularJS will execute on the handlebar notation, replacing them with the correct values.