title: AngularJS / ui-router - Looping over states, with resolves, needs a closure
body: <p>I'm building my states dynamically in our AngularJS app, using ui-router.</p>
  
  <p>Given an array of states like this (for example):</p>
  
  <pre><code>const dynamicStates = [
      {name: 'alpha', template: '123'},
      {name: 'bravo', template: '234'}
  ];
  </code></pre>
  
  <p>And then building the states like so (for example):</p>
  
  <pre><code>const states = [];
  dynamicStates.forEach(state =&gt; 
     states.push(
         state: state.name,
         resolve: {
             templateDetails: ['Service', (Service) =&gt;
                 Service.getTemplate(state.template)
                     .then(response =&gt; response)     
             ]
         }
     )
  })
  states.forEach(states =&gt; $stateProvider.state(state));
  </code></pre>
  
  <p>state.template, within the resolve function is always '123'. I'm certain that this is a closure issue, but I can't get my head around exactly how the resolve works (what is it actually returning), and so can't figure out how to close the scope around my state.template.</p>
  
  <p>Any ideas? Thanks.</p>