Mixing Angular.js and Bootstrap 3 - where are the incompatibilites?

Question

This is a conceptual question. I am considering adding AngularJS to my next project, for which I've already elected using Twitter Bootstrap 3 for UI controls. I see some possible friction in other stackoverflow questions, between the two frameworks, but am not quite sure what is the root reason for possible incompatibilities between the two.

They both listen to events, but bootstrap is mainly a front-end display library, whereas in my view, angular.js goes much deeper. Perhaps someone can fundamentally explain where the incompatibilities begin to arise. Hopefully in a way directly lending to determine how much it's a good idea to mix the two in the same project, or what should be avoided if doing so. This would save huge amounts of time learning through debug after it's too late, or avoiding the wrong architecture in the first place.

Answer 1

The potential problem is that Bootstrap uses jQuery for a lot of its UI functionality. Anything changed by jQuery is not reflected in Angular by itself - for instance checking a checkbox using "regular" javascript (or jquery) will not update its ng-model automatically in the way a user checking it would.

I'd say most bootstrap plugins can be made into directives, just like Angular-strap have done. But that can be a lot of work. Some common ones (like growl) are also available as stand-alone angular projects on Github.