title: Modifying factory value in directive Angular
body: <p>I have the following code : <a href="http://codepen.io/Andarius/pen/Ggryge" rel="nofollow">http://codepen.io/Andarius/pen/Ggryge</a> .  </p>
  
  <p>When the user draws a 'crop_area', the <code>crop</code> button should not be disabled anymore.<br>
  Why is the value <code>no_crop_area</code> (from the <code>Image</code> factory) not updated when drawing ?<br>
  Is it a scope problem ?</p>
  
  <p>Also, I'm pretty new to AngularJS and was wondering what is the best practice when passing a factory to a controller (if there is one)</p>
  
  <p>Given a factory :</p>
  
  <pre><code>myApp.factory('myFactory', function () {
      return {foo:{bar:2}};
  });  
  </code></pre>
  
  <p>Is it better to do :</p>
  
  <pre><code>myApp.controller('myCtrl', ['myFactory',function (myFactory) {
      var self = this;
      self.foo = myFactory;
      self.bar = myFactory.bar;
  }]);
  </code></pre>
  
  <p>or</p>
  
  <pre><code>myApp.controller('myCtrl', ['myFactory',function (myFactory) {
      var self = this;
      self.foo = myFactory;
      self.bar = self.foo.bar;
  }]);
  </code></pre>