Ng-click does not work in ionic title button

Question

I am trying to add a button on the right side of the title bar, the button is displayed, but ng-click does not start, if I move the button inside the ion, it starts working, it just does not work in the title.

html:

<ion-view> <ion-nav-bar class="bar-stable nav-title-slide-ios7" > <ion-nav-back-button class="button-icon icon ion-ios7-arrow-back"> </ion-nav-back-button> </ion-nav-bar> <ion-header-bar> <h1 class="title">Trips</h1> <div class="buttons pull-right"><button class="button button-icon icon ion-plus" ng-click="createTrip()"></button></div> </ion-header-bar> <ion-content> </ion-content> </ion-view> 

JS:

 .controller('TripCtrl', function($scope, $location, $localStorage){ console.log('inside TripCtrl'); $scope.$storage = $localStorage; var random1 = { name : 'random name 1', text : 'random text 1' } var random2 = { name : 'random name 2', text : 'random text 2' } $scope.trips = []; $scope.trips.push(random1); $scope.trips.push(random2); $scope.createTrip = function(){ console.log('clicked create new'); $location.path('/createTrip'); } }) 

Answer 1

Please ensure that createTrip defined inside the application root controller, and also note that the ion title bar does not listen for the default click event. if you want to bind the click event inside the ion's title bar, you need to wrap the target element inside the button block of the ion-header.

 <ion-header-bar align-title="left" class="bar-positive"> <div class="buttons"> <button class="button" ng-click="doSomething()">Left Button</button> </div> <h1 class="title">Title!</h1> <div class="buttons"> <button class="button">Right Button</button> </div> </ion-header-bar> 

http://ionicframework.com/docs/api/directive/ionHeaderBar/

Answer 2

I did something similar, however I use ui-sref to go directly to partial. I assume that you need to add this controller to your header, so it will work on any screen (just like the back button).