title: How to update directives based on service changes?
body: <p>I have a directive(<code>parent-directive</code>) containing a slider(mySlider), that on <code>stop</code> event, call an angular <code>$resource</code> service with 2 params and the service return an object.
  Directives structure:</p>
  
  <pre><code>&lt;parent-directive&gt;
  &lt;div ui-slider="slider.options" ng-model="mySlider" id="my-slider"&gt;
  &lt;span child-directive-one&gt;&lt;/span&gt;
  &lt;span child-directive-two&gt;&lt;/span&gt;
  &lt;span child-directive-three&gt;&lt;/span&gt;
  &lt;div&gt;
      &lt;span child-directive-four&gt;&lt;/child-directive-four&gt;
  &lt;/div&gt;
  &lt;/parent-directive
  </code></pre>
  
  <p>Whenever the user drag the slider, the service is called with different params and retieve new result, based on it I need to update the child directives.</p>
  
  <p>I have in mind three ways: </p>
  
  <ol>
  <li>using ng-model for all child elements instead directives, binding them on the scope of a controller in <code>parent-directive</code>;</li>
  <li>the second one, that I don't know how to do it, is to create a controller in the <code>parent-directive</code>, that send and receive data from the service and share it to <code>child-directives</code> in order to update them. </li>
  <li>the last one is to to create a state variable in the service and update it using a controller like to point 1.(see it above) and use a $watch to supervise the variable state and when it's changed then update the <code>child-directives</code>.</li>
  </ol>
  
  <p>How should I proceed?</p>
  
  <p>Please have a look here to see a brief code:
  <a href="http://jsfiddle.net/v5xL0dg9/2/" rel="nofollow">http://jsfiddle.net/v5xL0dg9/2/</a></p>
  
  <p>Thanks!</p>