title: Define function inside Angular directive's isolated scope
body: <p>I'm writing a custom <code>&lt;pagination&gt;</code> directive, which will return elements responsible for changing the current page and pagination settings (e.g. how many items will be displayed per page). The directive has isolated scope (to make it more reusable).</p>
  
  <p>Inside the directive template I need to call functions like <code>changePage()</code> or <code>changePaginationSettings()</code>. The only way to pass a function inside the isolated scope I've found so far is define the function in the controller.</p>
  
  <p><em>mainController.js</em></p>
  
  <pre><code>module.controller("mainController", function($scope) {
      $scope.changePage = function() { ... };
  });
  </code></pre>
  
  <p>and then pass it to directive as an attribute:</p>
  
  <p><em>pagination.js</em></p>
  
  <pre><code>module.directive("pagination", function() {
      return {
          restrict: "E",
          scope: {
             changePage: "="
          },
          templateUrl: "templates/pagination.html"
      }
  }
  </code></pre>
  
  <p><em>pagination.html</em></p>
  
  <pre><code>&lt;pagination change-page="changePage"&gt;
  </code></pre>
  
  <p>This looks very ugly to me, because it's splitting related code into 2 unrelated files. That is <code>changePage()</code> function should be defined in the <em>pagination.js</em> file, not in <em>mainController.js</em>.</p>
  
  <p>I'd think something like that should be possible:</p>
  
  <p><em>pagination.js</em></p>
  
  <pre><code>module.directive("pagination", function() {
      function changePage() { ... };
  
      return {
          restrict: "E",
          scope: {
             changePage: changePage
          },
          templateUrl: "templates/pagination.html"
      }
  }
  </code></pre>
  
  <p>But such code is producing a (meaningless to me) error: <code>Error: definition.match is not a function</code>.</p>
  
  <p><strong>Is there a way to achieve that? I mean to pass a function defined in the same file inside an isolated scope of directive.</strong></p>
  
  <p>I've read <a href="https://docs.angularjs.org/guide/directive" rel="noreferrer">AngularJS Directive Docs</a> but they don't even list what are legal values in <code>scope</code> object of a directive, only give some "=", "&amp;" and "@" examples.</p>