title: How do I track a long running async request in AngularJS / ui-router
body: <p>I am building an Angular app using state hierarchy provided by the <a href="https://github.com/angular-ui/ui-router" rel="nofollow noreferrer">angular-ui/ui-router</a> library.</p>
  <p>I have a request that takes many minutes to complete, so the goal is to <code>POST</code> to a request resource and then poll the server to determine when the request completes. The app is quite large and different areas of the site are organized into different decoupled modules, but the header is managed by a common root state.</p>
  <p>In order to message the completion event to the user without disturbing their browsing session, I would like to:</p>
  <ul>
  <li>Add a &quot;loading&quot; spinner to the header of the app when the request is made</li>
  <li>Allow the user to continue browsing the site but retain the &quot;loading&quot; spinner</li>
  <li>Replace the spinner with a &quot;check&quot; icon once the polling determines that the request has been completed.</li>
  </ul>
  <p>How can i encapsulate this process and allow it to continue running through multiple state transitions?</p>