How do I inject $cookies into an AngularJS service?
<p>I read the documentation for <code>$cookies</code> <a href="https://docs.angularjs.org/api/ngCookies/service/$cookies" rel="nofollow"> at this link</a>, and it suggests using the following syntax to inject <code>$cookies</code>:  </p>

<pre><code>angular.module('cookiesExample', ['ngCookies'])
   .controller('ExampleController', ['$cookies', function($cookies) {
</code></pre>

<p>I therefore tried the following syntax to inject <code>$cookies</code> into a service (note <code>factory</code> instead of <code>controller</code> below:  </p>

<pre><code>angular.module('auth', ['ngCookies'])
     .factory( 'auth', '$cookies',  function($rootScope, $http, $location, $cookies) {  
</code></pre>

<p>But the result is an obscure compilation error in FireFox that keeps the app from compiling.  The error is many tens of thousands of characters into <code>angular-bootstrap.js</code> and is unreachable because <code>angular-bootstrap.js</code> is compressed into perhaps 20 lines of 10,000+ characters per line.  Since <code>angular-bootstrap.js</code> has not been modified, I assume the error is in my app code, the only line of which that changed is shown above.  </p>

<p>I then resolved the compilation error by trying the following syntax for injecting <code>$cookies</code>:  </p>

<pre><code>angular.module('auth', ['ngCookies'])
   .factory( 'auth', function($rootScope, $http, $location, $cookies) {  
</code></pre>

<p>The result is that FireFox gives a diffent compilation error stating that <code>$cookies.get</code> is not a function, triggered at the following line of code:  </p>

<pre><code>authenticated1 : $cookies.get('AUTH1'),
</code></pre>

<p>To me this indicates that $cookies has not been properly inserted.  </p>

<p>Finally, I did a key word search inside <code>angular-bootstrap.js</code> and confirmed that there are many instances of the word <code>cookies</code>, which implies that the <code>cookies</code> api is in that file in the classpath, and thus that the problem seems to be in the syntax used to insert it into the service.  </p>

<p><strong>So what specific changes do I make to the code above to properly inject the <code>$cookies</code> api into the <code>auth</code> service?</strong></p>

<hr>

<p><strong>ONGOING EFFORTS:</strong>  </p>

<hr>

<p>As per suggestions from @charlietfl and @KenDev, I tried two changes to the syntax of the first line of the service.  Both versions cause the compilation error stating that <code>$cookies.get is not a function</code>.  To eliminate confusion, I am pasting all of the code from the actual service module as follows:  </p>

<pre><code>//angular.module('auth', ['ngCookies']).factory( 'auth', [ '$cookies', function($rootScope, $http, $location, $cookies) {
angular.module('auth', ['ngCookies']).factory('auth', ['$rootScope', '$http', '$location', '$cookies', function($rootScope, $http, $location, $cookies){
        var auth = {

            authenticated1 : $cookies.get('AUTH1'),
            authenticated2 : $cookies.get('AUTH2'),
            usrname : '',

            loginPath : '/login',
            logoutPath : '/logout',
            homePath : '/checkpin',
            path : $location.path(),

            authenticate1 : function(credentials, callback) {

                var headers = credentials &amp;&amp; credentials.username ? {
                    authorization : "Basic " + btoa(credentials.username + ":" + credentials.password)
                } : {};

                $http.get('user', {
                    headers : headers
                }).success(function(data) {
                    if (data.name) {
                        auth.authenticated1 = $cookies.get('AUTH1');
                    } 
                    else { 
//                          $cookies.put('AUTH1', 'no');
                        auth.authenticated1 = 'no';//$cookies.get('AUTH1'); 
                    }
                    callback &amp;&amp; callback(auth.authenticated1);
                }).error(function() {
//                      $cookies.put('AUTH1', 'no');
                    auth.authenticated1 = 'no';//$cookies.get('AUTH1');
                    callback &amp;&amp; callback(false);
                });

            },

            authenticate2 : function(funcJSON, callback) {
                $http.post('/check-pin', funcJSON).then(function(response, $cookies) {
                    if(response.data.content=='pinsuccess'){
                        auth.authenticated2 = $cookies.get('AUTH2');
                        callback &amp;&amp; callback(auth.authenticated2);
                    }else {
//                          $cookies.put('AUTH2', 'no');
                        auth.authenticated2 = 'no';//$cookies.get('AUTH2'); 
                        callback &amp;&amp; callback(false);
                    }
                });
            },

            clear : function() {
                $location.path(auth.loginPath);
//                  $cookies.put('AUTH1', 'no');
                auth.authenticated1 = 'no';//$cookies.get('AUTH1'); 
//                  $cookies.put('AUTH2', 'no');
                auth.authenticated2 = 'no';//$cookies.get('AUTH2'); 

                $http.post(auth.logoutPath, {}).success(function() { console.log("Logout succeeded");
                }).error(function(data) { console.log("Logout failed"); });
            },

            init : function(homePath, loginPath, logoutPath) {

                auth.homePath = homePath;
                auth.loginPath = loginPath;
                auth.logoutPath = logoutPath;

            }
        };
        return auth;
    }]);
</code></pre>

<p>Note that I tried the above separately twice with each of the following first lines:  </p>

<pre><code>angular.module('auth', ['ngCookies']).factory( 'auth', [ '$cookies', function($rootScope, $http, $location, $cookies) {

and then separately:  

angular.module('auth', ['ngCookies']).factory('auth', ['$rootScope', '$http', '$location', '$cookies', function($rootScope, $http, $location, $cookies){
</code></pre>

<p>I then tried @gnerkis' suggestion to update the version of AngularJS.  I noticed that my <code>pom.xml</code> had version <code>1.3.8</code> of <code>org.webjars:angularjs</code>, so I looked up the latest version at maven central and changed the version to <code>1.4.8</code> in my <code>pom.xml</code>, then typed <code>mvn clean install -U</code> and <code>mvn clean package -U</code> followed by <code>java -jar pathto/nameofjar.jar</code>, but got a different compilation error saying that <code>angular</code> is not defined, and pointing to the very first word of every controller in the app.  When I then reverted the app back to <code>1.3.8</code>, I was able to re-create the @charlietfl and @KenDev error described at the start of this <strong>ONGOING RESEARCH</strong> section.  </p>

<p><strong>What else can I try?</strong></p>

<p>As per @gnerkus' suggestion, I am posting my <code>index.html</code> as follows:  </p>

<pre><code>&lt;!doctype html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;base href="/" /&gt;
&lt;link href="css/angular-bootstrap.css" rel="stylesheet"&gt;
&lt;style type="text/css"&gt;
[ng\:cloak], [ng-cloak], .ng-cloak {
    display: none !important;
}
&lt;/style&gt;
&lt;/head&gt;

&lt;body ng-app="hello" ng-cloak class="ng-cloak"&gt;
    &lt;div ng-controller="navigation" class="container"&gt;
        &lt;ul class="nav nav-pills" role="tablist"&gt;
            &lt;li ng-class="{active:tab('home')}"&gt;&lt;a href="/"&gt;home&lt;/a&gt;&lt;/li&gt;
            &lt;li ng-class="{active:tab('message')}"&gt;&lt;a href="/message"&gt;message&lt;/a&gt;&lt;/li&gt;
            &lt;li ng-class="{active:tab('public1')}"&gt;&lt;a href="/public1"&gt;public1&lt;/a&gt;&lt;/li&gt;
            &lt;li ng-class="{active:tab('public2')}"&gt;&lt;a href="/public2"&gt;public2&lt;/a&gt;&lt;/li&gt;
            &lt;li ng-class="{active:tab('public3')}"&gt;&lt;a href="/public3"&gt;public3&lt;/a&gt;&lt;/li&gt;
            &lt;li ng-class="{active:tab('public4')}"&gt;&lt;a href="/public4"&gt;public4&lt;/a&gt;&lt;/li&gt;
            &lt;li ng-class="{active:tab('register')}"&gt;&lt;a href="/register"&gt;register&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="/login"&gt;login&lt;/a&gt;&lt;/li&gt;
            &lt;li ng-show="authenticated2()"&gt;&lt;a href="" ng-click="logout()"&gt;logout&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
    &lt;/div&gt;
    &lt;div ng-view class="container"&gt;&lt;/div&gt;
    &lt;script src="js/angular-bootstrap.js" type="text/javascript"&gt;&lt;/script&gt;
    &lt;script src="js/auth/auth.js" type="text/javascript"&gt;&lt;/script&gt;
    &lt;script src="js/home/home.js" type="text/javascript"&gt;&lt;/script&gt;
    &lt;script src="js/message/message.js" type="text/javascript"&gt;&lt;/script&gt;
    &lt;script src="js/public1/public1.js" type="text/javascript"&gt;&lt;/script&gt;
    &lt;script src="js/navigation/navigation.js" type="text/javascript"&gt;&lt;/script&gt;
    &lt;script src="js/hello.js" type="text/javascript"&gt;&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>