Never mix HTML DOM manipulation code and AngularJS code

One of the key mistakes that is made by developers new to AngularJS is using HTML DOM manipulation code and AngularJS code together. Though may work sometimes, this would turn out to be a serious problem in some cases.

Consider the following example where we are creating list of items using ng-repeat in the HTML Template.

Record value is : {{record.value}}


However we also have the following  code inside the AngularJS controller that sets the CSS class for the labels dynamically created using ng-repeat.

for (var index in records)


document.getElementById(“ectdqa”+index).className = “highlight”;


This code inside the controller may work sometimes and may not work sometimes. The reason being, the code inside the controller might try to set the CSS class even before the control is created by the ng-repeat command.

The correct way would be to set the highlight flag inside the model and use the model during ng-repeat to set the CSS Class.