We need to register the testimonials component with Salvatorre after it has rendered. We can do this through the link function. First, let's add the $timeout service as a dependency:

    .directive('testimonials', function(testimonialsService, $timeout)

The $timeout service is the AngularJS wrapper for the window.setTimeout function. As you may know, AngularJS works on a digest cycle, where it uses dirty-checking techniques to see which parts of the application need to be updated. This happens routinely or can be forced. We can use $timeout to ensure that certain code is executed in a later digest cycle. Let's update the link function with the following:

    link: function(scope, elem, attr, ctrl) {
        $timeout(function() {
            salvattore.registerGrid(elem[0])
        }, 1000)
    }

Here, we are using $timeout with two parameters. The latter parameter is a delay of 10 milliseconds to ensure that the code is executed in a later digest cycle; 1,000 milliseconds should be enough to ensure that the testimonial component has completed rendering. We pass in a function as the first parameter, responsible for calling Salvatorre's registerGrid function. The registerGrid function forcibly instruments the passed element with Salvattore. We pass the first element in the elem array, which is the rendered testimonial component. With this in place, the Testimonial tab will have a dynamic grid layout.

As such, we have managed to replicate the Testimonial tab—which leverages Bootstrap, Salvattore, Hover, and Animate.css—through AngularJS services and directives, using dynamic content instead of hard-coded values. It's now time to move on to React.