title: Can I make ng-model data available across multiple divs that are hidden and shown at runtime?
body: <p>I have a problem with some data I want to use as part of a signup form in angular.js. I have the form split out into multiple "steps" - such as company account information, then admin user information, and finally, payment information. This is common in many web applications, so I know it has to be possible.</p>
  
  <p>I have three divs which house each section of the form, as follows : </p>
  
  <pre><code>&lt;div class="lc-block" id="l-register1" data-ng-class="{ 'toggled': lctrl.register1 === 1 }" data-ng-if="lctrl.register1 === 1"&gt;
  
  &lt;div class="lc-block" id="l-register2" data-ng-class="{ 'toggled': lctrl.register2 === 1 }" data-ng-if="lctrl.register2 === 1"&gt;
  
  &lt;div class="lc-block" id="l-register3" data-ng-class="{ 'toggled': lctrl.register3 === 1 }" data-ng-if="lctrl.register3 === 1"&gt;
  </code></pre>
  
  <p>As you can tell here, these three sections are hidden and shown, based on some ui interaction which changes the valus of variables to make a given "step" appear.</p>
  
  <p>So here is my main issue : I want data from a model in "l-register1" to still be available when I am on the third step, for example, if I have the following input field inside "l-register1"...</p>
  
  <pre><code> &lt;input type="text" class="form-control" ng-model="client" placeholder="Company name"&gt; 
  </code></pre>
  
  <p>... and I hit "next" - I would like to still be able to retrieve that data during steps 2, and 3 - as I will obviously need it after all the data is in place, to send it off to my API (which I already have working)</p>
  
  <p>Any help with this would be awesome, I have been banging my head against a wall all day, trying to get this working!</p>