title: Updating Angular JS directive when Service changes
body: <p>I'm attempting to follow <a href="https://stackoverflow.com/a/14460332/828547">this SO answer explaining how to render a recursive JSON structure using a directive</a>. However, unlike the answer provided, my data is <strong>not</strong> known when the DOM is loaded and Angular runs for the first time. </p>
  
  <p>Instead, my data is retrieved from an HTML input field and stored in an Angular Service (when the user submits the form).</p>
  
  <p>How can I keep an Angular Directive up-to-date when the Service's data is modified?</p>
  
  <hr>
  
  <p><strong>Update in response to answer</strong></p>
  
  <p>@musically_ut provided an excellent answer that has helped, but revealed a related problem, preventing an implementation (updated here).</p>
  
  <p>The <strong>directive</strong> renders HTML that contains Angular <code>{{expressions}}</code> which access data stored in <code>$scope</code>. Since the original solution was to <code>$watch</code> when the <strong>service</strong> had it's data ready. How can I ensure the 'new' data is added to <code>$scope</code> <em>before</em> the <strong>directive</strong> renders?</p>
  
  <p>An overview of the architecture and flow is:</p>
  
  <ol>
  <li><code>ControllerA</code> -> Get input from user </li>
  <li><code>ControllerA</code> -> Use <strong>service</strong> to transform data </li>
  <li><code>ControllerB</code> -> <code>$watch</code> for changes in <strong>service</strong></li>
  <li><code>Directive</code> -> <code>$watch</code> for changes in <strong>service</strong></li>
  <li><code>ControllerB</code> -> Add data to <code>$scope</code></li>
  <li><code>Directive</code> -> Display transformed data (from <strong>service</strong>) using
  <strong>directives</strong></li>
  </ol>
  
  <p>The problem is between steps 5 and 6. The <strong>directive</strong> renders <code>{{expressions}}</code> before ControllerB has added the data to <code>$scope</code>. Even if this did work, it feels way too complex and 'hacky'.</p>
  
  <p>In fact, to regress, I'm using <code>$watch</code> in ControllerB to listen for when the transformed data is ready in a service. Even this feels a little overkill (the <strong>service</strong> makes no asynchronous calls). </p>