title: AngularJS : Two Way Data Binding in a Custom Directive Not Working
body: <p>I'm having a problem trying to grasp why two way data binding is't working in my custom directive?</p>
  
  <p>The codez:</p>
  
  <p><strong>Directive code:</strong></p>
  
  <pre><code>.directive('invoiceFilter', function () {
      return {
          restrict: 'E',
          replace: true,
          templateUrl: '_invoice-filter.tpl.html',
          scope: {
              selectedItem: '=',
              selectedItemChange: '&amp;'
          },
          link: function(scope) {
  
              scope.items = {
                  all: 'Show all invoices',
                  draft: 'Show drafts only',
                  open: 'Show open invoices',
                  paid: 'Show paid invoices'
              };
  
              scope.raiseSelectedItemChange = function (key) {
  
  
                  alert('Selected item in directive: ' + key + " (which seems to work!)");
  
                  scope.selectedItem = key;
                  scope.selectedItemChange();
  
              };
  
          }
      };
  });
  </code></pre>
  
  <p><strong>Directive template</strong></p>
  
  <pre><code>&lt;div class="btn-group dropdown"&gt;
      &lt;button class="btn dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown"&gt;
          {{ items[selectedItem || 'open' ] }}
          &lt;span class="caret"&gt;&lt;/span&gt;
      &lt;/button&gt;
      &lt;ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1"&gt;
          &lt;li ng-repeat="(key, value) in items"&gt;
              &lt;a href="javascript:void(0)" ng-click="raiseSelectedItemChange(key)"&gt;{{ value }}&lt;/a&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>As you can see I'm just adding some data to the scope (in the link function) and relying on the behavior of ng-repeat and ng-click to <em>raise</em> an event/callback when an item is selected. The alert correctly displays the selected item.</p>
  
  <p>But when I start using the directive like this:</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>  &lt;body ng-controller="MainController"&gt;
      &lt;h1&gt;Hello Plunker!&lt;/h1&gt;
      &lt;invoice-filter selected-item="filter" selected-item-change="filterChange()"&gt;&lt;/invoice-filter&gt;
    &lt;/body&gt;
  </code></pre>
  
  <p><strong>Controller</strong></p>
  
  <pre><code>    .controller('MainController', function($scope) {
  
          $scope.filter = "all";
  
          $scope.filterChange = function() {
  
            alert("Selected item in controller: " + $scope.filter + " (does not work, databinding problem???)");
  
          };
  
      })
  </code></pre>
  
  <p>The $scope.filter value never gets updated with the item I selected in the directive, even though I specified '=' on the directive scope which to my understanding should enable two way data binding, right?</p>
  
  <p>What am I missing here?</p>
  
  <p><strong>Plunk playground</strong></p>
  
  <p>Here's a <a href="http://plnkr.co/edit/mIKHqMixUALMR8DA18Vh" rel="nofollow noreferrer">plunkr</a> with the setup described above, so you can verify that it doesn't work :o/</p>
  
  <p>Thanks to anyone who can help!</p>