title: Angular UI router permissions / access control
body: <p>I am having a lot of trouble determining how to add permissions / access-control to our Angular app. Right now we have this:</p>
  
  <pre><code>    app.config(['$stateProvider', function ($stateProvider) {
  
        $stateProvider
  
        .state('default', {
          url: '',
          templateUrl: 'pages/home/view/home.html',
          controller: 'HomeCtrl'
        })
  
        .state('home', {
          url: '/home',
          templateUrl: 'pages/home/view/home.html',
          controller: 'HomeCtrl',
  
          permissions: {                    // ?
            only: ['Admin','Moderator']
          },
  
          access: {                         // ?
           roles: ['*']
          },
  
          resolve: {                        // ?
            authenticate: function($state, $q, $timeout){
  
            },
  
          }
  
        })
  
  }]);
  </code></pre>
  
  <p>I having trouble determining which methodology to use to create access control to each page.</p>
  
  <p>Right now, the logged in user is stored in an Angular value:</p>
  
  <pre><code>app.value('USER', JSON.parse('{{{user}}}'));
  </code></pre>
  
  <p>The USER value contains the information about which roles / permissions the user has.</p>
  
  <p>But I cannot inject USER into <code>app.config()</code> callback, it says "unknown provider".</p>
  
  <p>How can I do access-control based of the USER parameters?</p>