docs(bootstrap-prettify): fix $timeout issues and update related docs

End 2 end tests wait for all `$timeout`s to be run before completing the test.
This was problematic where we were using timeouts that restarted themselves because
there would never be a point when all timeouts had completed, causing the tests to hang.

To fix this $timeout had been monkey-patched but this caused other issue itself.

Now that we have $interval we don't need to use $timeout handlers that re-trigger the $timeout
so we can ditch the monkey-patch.

This commit tidies up any examples that are using this approach and changes them to use $interval
instead.

Closes #5232

1 files changed, 11 insertions, 15 deletions

diff --git a/docs/content/guide/directive.ngdoc b/docs/content/guide/directive.ngdoc
index b6b74a97..b3925bfc 100644
--- a/docs/content/guide/directive.ngdoc
+++ b/docs/content/guide/directive.ngdoc
@@ -528,8 +528,10 @@ where:
 * `attrs` is an object with the normalized attribute names and their corresponding values.
 
 In our `link` function, we want to update the displayed time once a second, or whenever a user
-changes the time formatting string that our directive binds to. We also want to remove the timeout
-if the directive is deleted so we don't introduce a memory leak.
+changes the time formatting string that our directive binds to. We will use the `$interval` service
+to call a handler on a regular basis. This is easier than using `$timeout` but also works better with
+end 2 end testing, where we want to ensure that all $timeouts have completed before completing the test.
+We also want to remove the `$interval` if the directive is deleted so we don't introduce a memory leak.
 
 <example module="docsTimeDirective">
   <file name="script.js">
@@ -537,7 +539,7 @@ if the directive is deleted so we don't introduce a memory leak.
       .controller('Ctrl2', function($scope) {
         $scope.format = 'M/d/yy h:mm:ss a';
       })
-      .directive('myCurrentTime', function($timeout, dateFilter) {
+      .directive('myCurrentTime', function($interval, dateFilter) {
 
         function link(scope, element, attrs) {
           var format,
@@ -552,20 +554,14 @@ if the directive is deleted so we don't introduce a memory leak.
             updateTime();
           });
 
-          function scheduleUpdate() {
-            // save the timeoutId for canceling
-            timeoutId = $timeout(function() {
-              updateTime(); // update DOM
-              scheduleUpdate(); // schedule the next update
-            }, 1000);
-          }
-
           element.on('$destroy', function() {
-            $timeout.cancel(timeoutId);
+            $interval.cancel(timeoutId);
           });
 
-          // start the UI update process.
-          scheduleUpdate();
+          // start the UI update process; save the timeoutId for canceling
+          timeoutId = $interval(function() {
+            updateTime(); // update DOM
+          }, 1000);
         }
 
         return {
@@ -583,7 +579,7 @@ if the directive is deleted so we don't introduce a memory leak.
 
 There are a couple of things to note here.
 Just like the `module.controller` API, the function argument in `module.directive` is dependency
-injected. Because of this, we can use `$timeout` and `dateFilter` inside our directive's `link`
+injected. Because of this, we can use `$interval` and `dateFilter` inside our directive's `link`
 function.
 
 We register an event `element.on('$destroy', ...)`. What fires this `$destroy` event?