Angular JS directive, calling another controller - angularjs

Question

I'm trying to implement a simple <pagination> directive in Angular JS, and having trouble getting it to communicate with another controller to get it to react on changes to the current page.
Here's what my code looks like:
paginationDirective.js
app.controller('paginationCtrl', function ($scope) {
this.init = function (attrs) {
$scope.items = [
{'page': '1', class: 'current'},
{'page': '2', class: ''},
{'page': '3', class: ''},
{'page': '4', class: ''},
{'page': '5', class: ''}
];
};
});
app.directive('pagination', function () {
return {
controller: 'paginationCtrl',
restrict: 'E',
scope: {
count: '#',
page: '#'
},
templateUrl: 'views/partials/pagination.html',
link: function (scope, element, attrs, paginationCtrl) {
paginationCtrl.init(attrs);
}
}
});
pagination.html
<div class="pagination-centered">
<ul class="pagination">
<li class="arrow unavailable">«</li>
<li ng-repeat="item in items" class="{{ item.class }}">
{{ item.page }}
</li>
<li class="arrow">»</li>
</ul>
</div>
somepage.html
<div class="content">
<table>...data for page x...</table>
<pagination onpage=" <!-- Run somepageCtrl.page(x) --> "></pagination>
</div>
somepageCtrl.js
app.controller('somepageCtrl', function($scope, myService){
$scope.currentPage = 1;
$scope.init = function () {
myService.loadData($scope);
};
$scope.navigate = function(page) {
console.log('Navigating to page ' + page);
}
$scope.init();
});
I'm still new to AngularJS, so I'm not entirely sure what I should do to get the pagination directive to tell somepageCtrl to navigate to the next page.
I would like to be able to pass a function that needs to be executed when the user clicks an item in the pagination directive as an attribute on the directive.
Can anyone help and nudge me in the right direction?

Answer 1

I'm going to answer my own question, thanks to Esteban Felix for pointing me into the right direction.
I defined the navigate() method on somepageCtrl:
$scope.navigate = function (page) {
console.log('Lets go to page ' + page);
};
then simply added the function to
<pagination on-change="navigate"></pagination>
The method then gets assigned in the app.directive definition like so:
scope: {
count: '#',
page: '#',
onChange: '&onChange'
},
On the app.controller for paginationCtrl, I created a callback function:
$scope.callback = function (page) {
console.log('Turn to page ' + page);
$scope.onChange()(page);
}
and updated the markup for pagination.html to call the above callback with ng-click like so:
{{ item.page }}

Answer 2

You can use the experession callback & to call your controller back from a directive.
pagination directive
app.directive('pagination', function () {
return {
controller: 'paginationCtrl',
restrict: 'E',
scope: {
count: '#',
page: '#',
onPageChange: '&'
},
templateUrl: 'views/partials/pagination.html',
link: function (scope, element, attrs, paginationCtrl) {
paginationCtrl.init(attrs);
// grab function pointer so it will be called correctly with ng-click
scope.onPageChange = scope.onPageChange();
}
}
});
somepage.html
<div class="content">
<table>...data for page x...</table>
<pagination on-page-change="sompageCtrl.navigate"></pagination>
</div>
pagination.html
<div class="pagination-centered">
<ul class="pagination">
<li class="arrow unavailable">«</li>
<li ng-repeat="item in items" class="{{ item.class }}">
{{ item.page }}
</li>
<li class="arrow">»</li>
</ul>
</div>