title: Listening for changes in a parent model from an AngularJS formatter directive
body: <p>I have made an AngularJS directive that requires a model and converts the value of the model (which, in this example is "25mm") to something else that is showed in the view (in this example, converted to inches).</p>
  
  <p>Here is a working plnkr demo: <a href="http://plnkr.co/edit/fO1S9GcubHE57Pf7Kt9G?p=preview" rel="nofollow">http://plnkr.co/edit/fO1S9GcubHE57Pf7Kt9G?p=preview</a></p>
  
  <p>The demo, however, doesn't work as expected. After changing the value of the dropdown from "inches" to "feet", I'd expect the view to be re-rendered with the appropriate value. This is not the case.</p>
  
  <p>I have noticed that this is because I'm not "listening" for changes, and that is why I placed the </p>
  
  <pre><code>scope.$watch("[convertFrom, convertTo]", function(n) {
  
  });
  </code></pre>
  
  <p>which works fine in terms of watching for changes, but if I uncomment that <code>$watch</code>, the formatter stops working.</p>
  
  <p>My second problem is that I'm pushing functions to the arrays <code>$formatters</code> and <code>$parsers</code>. To be exact, one function every time the value of the dropdown changes.</p>
  
  <p>My questions are:</p>
  
  <ul>
  <li>How can I watch for changes and make the formatter work?</li>
  <li>How can I not insert a new function in the <code>$formatter</code> and the <code>$parser</code> arrays every time my dropdown changes.</li>
  </ul>