title: AngularJS 1.4 directives: scope, two way binding and bindToController
body: <blockquote>
    <p><strong>Update</strong>: It must have been something stupid in another part of the code. It works now, so the bindToController syntax is fine.</p>
  </blockquote>
  
  <p>We are using AngularJS 1.4, which introduced a <a href="http://toddmotto.com/no-scope-soup-bind-to-controller-angularjs/" rel="noreferrer">new way to use bindToController</a> in directives.</p>
  
  <p>After quite a bit of reading (and maybe not understanding everything), we defined our directive like this:</p>
  
  <pre><code>  .directive('mdAddress', function mdAddress() {
      var directive = {
        restrict: 'EA',
        scope: {},
        bindToController: {
          address: '='
        },
        templateUrl: 'modules/address/address.html',
        controller: AddressController,
        controllerAs: 'dir'
      };
  </code></pre>
  
  <p>Calling it from another view like this:</p>
  
  <pre><code>  &lt;md-address address="vm.address"&gt;&lt;/md-address&gt;
  </code></pre>
  
  <p>Having previously defined in the view controller:</p>
  
  <pre><code>  vm.address = {
      street: null,
      countryCode: null,
      cityCode: null,
      postalCode: null
    };
  </code></pre>
  
  <p>Referencing the variables in the directive template like this:</p>
  
  <pre><code>  &lt;md-input-container&gt;
      &lt;label&gt;{{'ADDRESSNUMBER' | translate}}&lt;/label&gt;
      &lt;input type="number" ng-model="dir.address.streetNumber"&gt;
    &lt;/md-input-container&gt;
  </code></pre>
  
  <p>We spent 4h trying to figure out why our directive was not working. Well, it was working, but the two-way binding between the controller and the directive was not, <code>vm.address.street</code> was hopelessly set to null. </p>
  
  <p>After a while, we just tried the old way:</p>
  
  <pre><code>  .directive('mdAddress', function mdAddress() {
      var directive = {
        restrict: 'EA',
        scope: {
          address: '='
        },
        bindToController: true,
        templateUrl: 'modules/address/address.html',
        controller: AddressController,
        controllerAs: 'dir'
      };
  </code></pre>
  
  <p>And it magically worked. Any idea <strong>WHY</strong>?</p>