Angular’s bootstrap process is super easy and just about every example you find on the internets goes something like this:
This breaks down, however, if you want to enable multiple CEWP’s representing multiple angular web parts on the same page. Angular will only automatically bootstrap against the first ng-app directive it finds – at least as of angular version 1.3.6. The solution is pretty simple – manually bootstrap your code instead. The above now changes to something like this:
<div id=”bootstrapHere” ng-controller=”myController as theController”>
Basically, instead of using ng-app on the element to do your bootstrapping, you slap an ID onto that element. Then, use the bootstrap() method on angular itself to control the bootstrapping process at run-time. I’ve tested this with three different Angular web parts on the same page and it works a charm.
Follow me on Twitter at http://www.twitter.com/pagalvin