title: Update controller scope from directive
body: <p>I am creating reusable UI components with AngularJS directives. I would like to have a controller that contains my business logic with the nested components (directives). I want the directives to be able to manipulate a single property on the controller scope. The directives need to have an isolate scope because I might use the same directive more than once, and each instance needs to be bound to a particular controller scope property.</p>
  
  <p>So far, the only way I can apply changes back to the controller's scope is to call <code>scope.$apply()</code> from the directive. But this breaks when I'm inside of an ng-click callback because of rootScope:inprog (scope operation in progress) errors.</p>
  
  <p>So my <strong>question</strong>: What is the best way to make my controller aware when a child directive has updated a value on the controller's scope?</p>
  
  <p>I've considered having a function on the controller that the directive could call to make an update, but that seems heavy to me.</p>
  
  <p>Here is my code that breaks on an ng-click callback. <em>Keep in mind that I don't just want to solve the ng-click issue.</em> I want the best overall solution to apply reusable directives to modify a parent scope/model.</p>
  
  <p><strong>html</strong></p>
  
  <pre><code>&lt;div ng-controller="myCtrl"&gt;
      &lt;my-directive value="val1"&gt;&lt;/my-directive&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>controller</strong></p>
  
  <pre><code>...
  .controller('myCtrl', ['$scope', function ($scope) {
      $scope.val1 = 'something';
  }});
  </code></pre>
  
  <p><strong>directive</strong></p>
  
  <pre><code>...
  .directive('myDirective', [function () {
  
  return {
      link: function(scope) {
          scope.buttonClick = function () {
              var val = 'new value';
              scope.value = val;
              scope.$apply(); 
          };
      },
      scope: {
          value: '='
      },
      template: '&lt;button ng-click="buttonClick()"&gt;&lt;/button&gt;'
  };
  }]);
  </code></pre>