title: AngularJS: How to set a controller property from a directive that uses a child scope?
body: <p><a href="http://plnkr.co/edit/IkZ7KnfIhVemYEua1QFO?p=preview" rel="nofollow"><strong>LIVE DEMO</strong></a></p>
  
  <p>Consider the following <code>spinner-click</code> directive:</p>
  
  <p><strong>Directive Use:</strong></p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;button class="btn btn-mini"
          ng-class="{'btn-warning': person.active, disabled: !person.active}"
          spinner-click="deleteItem($index)"
          spinner-text="Please wait..."
          spinner-errors="alerts"&gt;
    Delete
  &lt;/button&gt;
  </code></pre>
  
  <p><strong>Directive:</strong></p>
  
  <pre class="lang-js prettyprint-override"><code>app.directive('spinnerClick', function() {
    return {
      restrict: 'A',
      scope: true,
      link: function(scope, element, attrs) {
        var originalHTML = element.html();
        var spinnerHTML = "&lt;i class='icon-refresh icon-spin'&gt;&lt;/i&gt; " + attrs.spinnerText;
  
        element.click(function() {
          if (element.is('.disabled')) {
            return;
          }
  
          element.html(spinnerHTML).addClass('disabled');
  
          scope.$apply(attrs.spinnerClick).then(function() {
            element.html(originalHTML).removeClass('disabled');
          }, function(errors) {
            element.html(originalHTML).removeClass('disabled');
  
            // This is ugly! Is there a better way?
            var e = scope[attrs.spinnerErrors];
            e.length = 0;
            e.push.apply(e, errors);
          });
        });
      }
    };
  });
  </code></pre>
  
  <p><strong>Controller:</strong></p>
  
  <pre><code>app.controller('MainCtrl', function($scope, $q, $timeout) {
    $scope.alerts = ['First alert'];
    $scope.people = [
      { name: 'David', active: true },
      { name: 'Layla', active: false }
    ];
  
    $scope.deleteItem = function(index) {
      var defer = $q.defer();
  
      $timeout(function() {
        defer.reject(["Something 'bad' happened.", "Check your logs."]);
      }, 2000);
  
      return defer.promise;
    };
  });
  </code></pre>
  
  <p><strong>Note:</strong> <code>spinner-click</code> can be used with other directives (e.g. <code>ng-class</code> in this example).</p>
  
  <p>As you can see, I set <code>$scope.alerts</code> in the directive using a very nasty way. Can you find a better way to do this?</p>
  
  <hr>
  
  <p><strong>UPDATE:</strong> <a href="http://plnkr.co/edit/orIvYPNJH2JHnVW03EDE?p=preview" rel="nofollow">(<strong>DEMO</strong>)</a></p>
  
  <p>I tried to use <a href="http://docs.angularjs.org/api/ng.%24parse" rel="nofollow"><code>$parse</code></a> like this:</p>
  
  <pre class="lang-js prettyprint-override"><code>var errorsModel = $parse(attrs.spinnerErrors);
  errorsModel.assign(scope, errors);
  </code></pre>
  
  <p>and this doesn't work.</p>
  
  <p><strong>BUT</strong>, if I have <code>spinner-errors="wrapper.alerts"</code> rather than <code>spinner-errors="alerts"</code>, <a href="http://plnkr.co/edit/orIvYPNJH2JHnVW03EDE?p=preview" rel="nofollow"><strong>it does work!</strong></a></p>
  
  <p>Is there a way to avoid using the wrapper?</p>