title: How do you bind an object returned from a factory to a method on an element?
body: <p>I am learning how to use angular and I decided to split some code off into its own module to keep my main javascript file cleaner. I have everything working except for the binding part. Before I split it I had an element in my html file using <code>ngStyle</code> and I had a variable on my scope. I would call <code>$scope.$apply(function () { $scope.styles = { width: xxx }; })</code> when ever I set the variable on my scope and the element would update. </p>
  
  <p>When I removed everything from my code and seperated it into a factory and directives I couldn't figure out how to do the same thing. I basically ended up with the code below and everything works except <code>ele</code>'s style tag does not update. </p>
  
  <p>I wanted to use variables to hold the values and generate the styles object so I didn't have to do extra work myself, did I handle this correctly? If so, how can I make sure the element updates when <code>myFactory</code>'s <code>size</code> variable changes? If not, what would be a better way to handle this?</p>
  
  <pre><code>angular.module('test').factory('myFactory', function ($) {
      var size = 0;
  
      return {
          setSize: function (value) {
              size = value;
          },
          styles: {
              width: size + "px"
          }
      };
  });
  
  angular.module('test').directive('testDirective', ['myFactory', function (myFactory) {
      return {
          restrict: 'EA',
          link: function (scope, ele) {
              ele.css(myFactory.styles);
          }
      };
  }]);
  </code></pre>