Integrating AngularJS in my Drupal site

With the guidance and help from https://www.zivtech.com/blog/binding-drupal-data-angularjs-step-step-tutorial , I updated my Drupal site’s home page to have AngularJS integrated with it. Before proceed further you should definitely checkout the awesome tutorial provided in the above mentioned site.

On the first glance, it looks to me like a cakewalk to integrate AngularJS with the information provided by the site, but to my surprise after taking all the steps also, I was not able to get AngularJS getting loaded on the browser. So I installed the chrome extension (AngularJS Batarang) to find out the cause and it was

Error: $injector:modulerr Module Error

After doing some research, I found that though to load the AngularJS on the browser I was loading all the required angularjs libraries alongwith angular-resource with correct AngularJS version in my Drupal site,

But due to AngularJS Drupal module, it was loading twice. And the latest one which it was loading and getting used was the angular_resource.js from the JS folder of AngularJS Drupal module itself.

To get this working I had to patch angularjs.module file of Drupal

This fixed the issue and now my home page is loading AngularJS correctly.