Button component text change from parent controller on onclick is not working - AngularJS 1.7

Question

This is for an existing project, here I am using AngularJS 1.7.

I have a toggle button component, below is toggle-button.component.js

angular.module('cxvr')
  .component('toggleButton', {
    require: {},
    bindings: {
      text: '=',
      obj: '='
    },
    transclude: true,
    templateUrl: template,
    controller: function ($scope, $element) {
      }
    }
  });

toggle-button.template.html

<button class="toggle-button" ng-click="$ctrl.toggleActionn()">
  <span class="theme-floating-button-img"></span>{{$ctrl.text}}
</button>

Here is the html where I am using toggle-button

 <toggle-button class="live" obj="$ctrl.obj" text="$ctrl.text" ng-click="$ctrl.liveAction()">
</toggle-button>

Corresponding controller is

   angular.module('consumerServiceApp').controller(CONTROLLER,
      function (MenuPaginationService) {
     $ctrl.obj = [{text:'LIVE', class:"live"}];
     $ctrl.text = $ctrl.obj[0].text;

     $ctrl.liveAction = function () {
          $ctrl.text ="zzz";
        }; 
    });

My issue is that I want to change the button component text(button text - $ctrl.text) on it's onclick function from this controller. I tried to code as shown above, but the button text is not changing on click function.

Thanks in Advance..