Angular JS: Detect if ng-bind-html finished loading then highlight code syntax

Question

I am using ng-bind-html for binding data that I get from database.

   


app.controller(\'customersC         


        

Answer 1

So here's what is happening:

1. You update the $scope.myHTML value
2. You run your jQuery each() loop
3. The digest cycle runs and your template is updated

Notice that the digest cycle runs after your jQuery each() loop -- or, more specifically, after your $http callback function is finished running.

That means the value of $scope.myHTML in your controller is not applied to the ng-bind-html directive until after your loop has already finished.

To overcome this, you could use Angular's $timeout service instead of the native browser setTimeout() method. By default, $timeout will invoke the callback function during the next digest cycle, which means it will run after the changes to $scope.myHTML are applied to the ng-bind-html directive (as long as you update $scope.myHTML before calling $timeout()).

Working example: JSFiddle