How to access controller of the current view in ion-header-bar which is saved as a directive?

When I put my ion-header-bar in a seperate file (header-dash.html) and assign it as a directive "headerDash", I seem not to be able to access my DashCtrl or the controller of my view where the header-dash directive is called. More specific, in the code below, I cannot call the function changeDashMode(). However, when I replace <header-dash></header-cash> with the content of header-dash.html, then everything works fine.

I guess it has something to do with the setup of the directive, anyone thoughts?

Update: newImport() also in header-dash does work... it is when I added another function changeDashMode that it does not work. What is going on?

controllers.js

.controller('DashCtrl', function($scope) {

  // -------------------------------------------------------------------------
  // Init
  $scope.dashMode = false;


  // ---------------------------------------------------------------------------
  $scope.changeDashMode = function() {
    console.log("test")
    if (!$scope.dashMode) {$scope.dashMode = true;} else {$scope.dashMode = false;}
  }

// and the rest of the controller 
// ...
})

header-dash.html

<ion-header-bar align-title="center" class="bar-positive">
  <div class="buttons"> 
    <button class="button button-light" ng-click="newImport()">+ New</button>
  </div>
  <h1 class="title"><logo></logo></h1>
  <div class="buttons" ng-controller="DashCtrl">
    <button class="button button-light" ng-show="!dashMode" ng-click="changeDashMode()">Select</button>
    <button class="button button-light" ng-show="dashMode" ng-click="changeDashMode()">Edit</button>
  </div>
</ion-header-bar>

tab-dash.html

<ion-view view-title="Dashboard">

  <header-dash></header-dash>

  <ion-content has-bouncing="true" has-header="true">
    <ion-refresher
    pulling-text="Pull to refresh..."
    on-refresh="doRefresh()">
    </ion-refresher>

    <ion-list>
      <ion-item>Select mode? {{dashMode}}</ion-item>
    </ion-list>


  </ion-content>
</ion-view>

directives.js

angular.module('starter.directives', [])

.directive('headerDash', function() {
  return {
    restrict: 'E',
    templateUrl: 'templates/header-dash.html' // tried to add controller: "DashCtrl" but that didnt work
  }
})

Is tab-dash.html being the template displayed by the DashCtrl?

Because in header-dash.html, you're using ng-controller again, creating an child scope, effectively having DashCtrl in DashCtrl

<div class="buttons" ng-controller="DashCtrl">