title: Why is angular provider not defined?
body: <p>I'm trying to integrate <a href="http://adodson.com/hello.js/" rel="nofollow">hello.js</a> into <a href="https://github.com/rdash/rdash-angular" rel="nofollow">rdash-angular</a> using <a href="https://github.com/gonzalo123/ngHello" rel="nofollow">ng-hello</a> see also the ng-hello <a href="http://gonzalo123.com/2015/03/02/building-a-angularjs-provider-for-hello-js-library/" rel="nofollow">blog post</a>.</p>
  
  <p>The error that I get when the page loads is:</p>
  
  <blockquote>
    <p>Uncaught ReferenceError: helloProvider is not defined(anonymous
    function) @ dashboard.min.js:2</p>
  </blockquote>
  
  <p>I've included Hello and ng-hello in bower.json and installed successfully,
  which copies to </p>
  
  <ul>
  <li>src/components/hello</li>
  <li>src/components/ng-hello</li>
  </ul>
  
  <p>The app structure defined by rdash-angular minifies the vendor scripts and references them in file lib/js/main.min.js, then the app source files are minified and referenced in file js/dashboard.min.js</p>
  
  <p><strong>index.html</strong>
  </p>
  
  <pre><code>  &lt;!-- SCRIPTS --&gt;
    &lt;!-- build:js lib/js/main.min.js --&gt;
    &lt;script type="text/javascript" src="components/angular/angular.min.js"&gt;&lt;/script&gt;
    &lt;script type="text/javascript" src="components/angular-bootstrap/ui-bootstrap-tpls.min.js"&gt;&lt;/script&gt;
    &lt;script type="text/javascript" src="components/angular-cookies/angular-cookies.min.js"&gt;&lt;/script&gt;
    &lt;script type="text/javascript" src="components/angular-ui-router/release/angular-ui-router.min.js"&gt;&lt;/script&gt;
    &lt;script type="text/javascript" src="components/hello/dist/hello.all.min.js"&gt;&lt;/script&gt;
    &lt;script type="text/javascript" src="components/ng-hello/dist/ng-hello.min.js"&gt;&lt;/script&gt;
    &lt;!-- endbuild --&gt;
    &lt;!-- Custom Scripts --&gt;
    &lt;script type="text/javascript" src="js/dashboard.min.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p><strong>ng-hello.js</strong>
  </p>
  
  <pre><code>(function (hello) {
      angular.module('ngHello', [])
          .provider('hello', function () {
              this.$get = function () {
                  return hello;
              };
  
              this.init = function (services, options) {
                  hello.init(services, options);
              };
          });
  })(hello);
  </code></pre>
  
  <p><strong>module.js</strong>
  </p>
  
  <pre><code>angular.module('RDash', ['ui.bootstrap', 'ui.router', 'ngCookies', 'ngHello']);
  </code></pre>
  
  <p><strong>routes.js</strong>
  </p>
  
  <pre><code>'use strict';
  
  /**
   * Route configuration for the RDash module.
   */
   angular.module('RDash').config(['$stateProvider', '$urlRouterProvider', helloProvider,
       function($stateProvider, $urlRouterProvider, helloProvider) {
  
           helloProvider.init({
                 google: '0123456789MYAPPTOKEN.apps.googleusercontent.com'
           });
  
           // For unmatched routes
           $urlRouterProvider.otherwise('/');
  
           // Application routes
           $stateProvider
               .state('index', {
                   url: '/',
                   templateUrl: 'templates/dashboard.html'
               })
               .state('tables', {
                   url: '/tables',
                   templateUrl: 'templates/tables.html'
               });
       }
   ]);
  </code></pre>
  
  <p>As mentioned earlier, the error that I get is helloProvider is not defined.<br>
  Why is this happening?</p>