title: angularjs bind to controller with isolated scope
body: <p>I have a pretty simple directive and I want to use the <strong>bindToController</strong> option. So, I created my directive like this:</p>
  
  <pre><code>(function () {
      'use strict';
  
      angular.module('sapphire.directives').directive('list', list);
  
      function list() {
          return {
              restrict: 'A',
              template: '&lt;div class="row flex-column" ng-class="{ \'spinner-dark\': controller.loading }" ng-include="controller.templateUrl" ng-if="controller.loading || controller.models.length"&gt;&lt;/div&gt;',
              controller: 'ListDirectiveController',
              controllerAs: 'controller',
              scope: true,
              bindToController: {
                  method: '&amp;list',
                  templateName: '@'
              }
          };
      };
  })();
  </code></pre>
  
  <p>And then I created my controller like this:</p>
  
  <pre><code>(function () {
      'use strict';
  
      angular.module('sapphire.directives').controller('ListDirectiveController', listDirectiveController);
  
      listDirectiveController.$inject = ['ListDirectiveService', 'Selections'];
  
      function listDirectiveController(broadcast, selections) {
          var self = this;
  
          console.log(self);
  
          // Bindings
          self.limit = 0;
          self.total = 0;
          self.loading = true;
          self.templateUrl = 'app/directives/lists/list/' + (self.templateName || 'list-default') + '.html';
          self.isSelected = selections.isSelected;
          self.select = selections.select;
  
          // Method binding
          self.list = list;
  
          init();
  
          //////////////////////////////////////////////////
  
          function init() {
              list();
          };
  
          // Our list method
          function list() {
  
              // Set our initial limit
              self.limit += 10;
              self.loading = true;
  
              // Get our items
              return self.method({ limit: self.limit }).then(function (response) {
                  self.loading = false;
                  self.models = response;
                  self.total = response.length;
              });
          };
  
          ///////// ------ Removed for brevity ------ /////////
      };
  })();
  </code></pre>
  
  <p>When I use this directive I get an error stating:</p>
  
  <blockquote>
    <p>self.method is not a function</p>
  </blockquote>
  
  <p>which is why I am console.logging the controller to see what is bound to it. Surely enough, the <strong>method</strong> and <strong>templateName</strong> are missing.
  I have tried a few ways to get this to work:</p>
  
  <pre><code>scope: {
      method: '&amp;list',
      templateName: '@'
  },
  bindToController: true
  </code></pre>
  
  <p>or </p>
  
  <pre><code>scope: {},
  bindToController: {
      method: '&amp;list',
      templateName: '@'
  }
  </code></pre>
  
  <p>but nothing seems to work. I can't get my isolated scope to be bound to my controller....
  Does anyone know what I am doing wrong?</p>
  
  <p>PS: I am using angular 1.6.4</p>
  
  <p>To use the directive I do this:</p>
  
  <pre><code>&lt;div class="invisible-container" list="controller.listUsers(limit)" template-name="users"&gt;&lt;/div&gt;
  </code></pre>