Integrating AngularJS with JSP Page

Ideally I wouldn't recommend injecting username and password into index.html for angularjs controller/services to use. If the user is already authenticated by the time you load angular managed page then either inject a authorization token or setup a cookie that would be sent by the browser automatically (assuming jsp app and angular app are on the same domain)

Now talking about injecting data for angularjs to use there are two ways that I can think of (I recommend the 2nd approach as it doesn't pollute the global scope)

1. Inject it as a global and access via $window. For eg. have your server side .jsp render a script tag with a global var like

   <script type="type/javascript">
      var pass = 'whatevervalue';
   </script>
   

and access it in your controller with $window

    angular.module('yourapp').controller('YourCtrl', $window){
        console.log($window.pass);
    }

2. You can use angular-preloaded to inject your variables in a script tag of type="text/preloaded" and have it available to your controller via $preloaded service.

Have your jsp output stuff like below

<script type="text/preloaded">
{
  "data": "point"
}
</script>

and get it in your controller like below

angular.module('app', ['gs.preloaded'])
.controller('SomeCtrl', function ($preloaded) {
    // do something with $preloaded.
    $preloaded; // => { data: "point", another: { point: "of data" } }
});

Remember to put your preloaded script before you controller script for this to work. From docs

NOTE: Your script tags must run before anything using $preloaded, so I suggest putting them in your document's head.