Click button to change text on ionic-card

I’m trying to do a simple application whereby if I click a button, the text in the card would change according to what button I click on. Here is a sample of my code:

The body tag is:
<body ng-app="app" ng-controller="MainCtrl">

The rest of it is:

<div class="list card" id="rosary-card21" ng-controller="cardCtrl">
        <h4 id="rosary-heading5" style="color:#5239FF; text-align: center">Prayer</h4>
        <div id="rosary-markdown3" style="color:black; height: 200px" >
              Show Something!
              <my-directive data="myData">
    <!-- bead section-->
    <div ng-controller="beadCtrl">
    <ion-slides options="options" style="height: 270px; width: 130px;">
      <ion-slide-page><button class="button button-clear button-large" ng-click="changeMyData('ONE')">
      <ion-slide-page><button class="button button-clear button-large" ng-click="changeMyData('TWO')">
      <ion-slide-page><button class="button button-clear button-large" ng-click="changeMyData('THREE')">

As you can see above this is from the HTML file whereby, the button is in an ion-slide-page and each of the button.

My js controller is as below:

var app = angular.module('app');

app.controller('MainCtrl', function($scope){
	$scope.myData = {
		value: 'No value yet'

	$scope.display = {
		value: 'Not fired yet'
    app.controller('beadCtrl', function($scope, $rootScope){

      $scope.changeMyData= function(param) {
    		$scope.myData.value = param;

      $scope.options ={
        direction: 'vertical',
        slidesPerView: '3',
        paginationClickable: true,
        showNavButtons: false

  app.controller('cardCtrl', ['$scope', function($scope, $rootScope){
         $rootScope.$on('myEvent', function(e, val){
         $scope.display.value = val;

app.directive('myDirective', function($rootScope) {
console.log('Start directive');
return {
	template: '{{ myData.value }}',
	scope: {myData : '=data'},
	link: function(scope, element, attrs) {

	scope.$watch(, function(newVal, oldVal) {
		if (newVal != oldVal) {
			console.log('myData has changed');
		}, true);

The error that is shown from the console is:

2     913459   error    TypeError: Cannot read property '$on' of undefined
    at new <anonymous> (http://localhost:8100/js/app.js:64:15)
    at Object.invoke (http://localhost:8100/lib/ionic/js/ionic.bundle.js:17762:17)
    at extend.instance (http://localhost:8100/lib/ionic/js/ionic.bundle.js:22311:34)
    at nodeLinkFn (http://localhost:8100/lib/ionic/js/ionic.bundle.js:21421:36)
    at compositeLinkFn (http://localhost:8100/lib/ionic/js/ionic.bundle.js:20853:13)
    at nodeLinkFn (http://localhost:8100/lib/ionic/js/ionic.bundle.js:21457:24)
    at compositeLinkFn (http://localhost:8100/lib/ionic/js/ionic.bundle.js:20853:13)
    at nodeLinkFn (http://localhost:8100/lib/ionic/js/ionic.bundle.js:21457:24)
    at compositeLinkFn (http://localhost:8100/lib/ionic/js/ionic.bundle.js:20853:13)
    at publicLinkFn (http://localhost:8100/lib/ionic/js/ionic.bundle.js:20728:30)

If I were to remove the ng-controller in the HTML file for cardCtrl(), then if I were to click on the button this error occurs:

1     712454   error    TypeError: Cannot set property 'value' of undefined
    at Scope.$scope.changeMyData (http://localhost:8100/js/app.js:37:23)
    at fn (eval at compile (http://localhost:8100/lib/ionic/js/ionic.bundle.js:26457:15), <anonymous>:4:239)
    at http://localhost:8100/lib/ionic/js/ionic.bundle.js:62386:9
    at Scope.$eval (http://localhost:8100/lib/ionic/js/ionic.bundle.js:29158:28)
    at Scope.$apply (http://localhost:8100/lib/ionic/js/ionic.bundle.js:29257:23)
    at HTMLButtonElement.<anonymous> (http://localhost:8100/lib/ionic/js/ionic.bundle.js:62385:13)
    at HTMLButtonElement.eventHandler (http://localhost:8100/lib/ionic/js/ionic.bundle.js:16583:21)
    at triggerMouseEvent (http://localhost:8100/lib/ionic/js/ionic.bundle.js:2948:7)
    at tapClick (http://localhost:8100/lib/ionic/js/ionic.bundle.js:2937:3)
    at HTMLDocument.tapMouseUp (http://localhost:8100/lib/ionic/js/ionic.bundle.js:3013:5)

Any help would be great especially on how to solve the $on issue. Thanks! And if anybody could point out anywhere on the web on how to achieve my simple function of a clicking a button and change a text in a ionic-card.