How to access value from one controller to the other using scope?

Question

I have two controllers: One with controls - textarea and button. And another that takes the value of the text from the textarea and then displays it. I am able push the value of the textarea into an array. But I cant access the array in another directive so that it wud display the value.

I am new to angular scopes.

First Controller: This directive has its own controller.

angular.module('myApp')
.controller('listController', ['$scope','$compile','$http', function($scope, $compile, $http){
    'ngInject';
    var vm =this;
    console.log("in addmectrl"); 
    $scope.tasks=[];
    $scope.cardarr =[]; 

    vm.addme = function(){

         $scope.tasks.push({title: vm.title, cardarr: []}); //pushes in to an array  
}
}])
.directive('addListControls', function() {
    return {
        restrict: 'E', // Element directive'
        controller: 'listController as listctrl2',
        scope: { tasks: "@",
                 cardarr: "@"},
        template: `
           <textarea ng-model= "listctrl2.title" placeholder ="Add a List"
                     id="input" style = "position:absolute">
           </textarea>
           <button id="controlbutton"  class ="btn btn success"
                    style = "position:absolute" 
                    ng-click="listctrl2.addme()">Save
           </button>
           <img id ="remove" src ="remove.png"
                ng-click ="listctrl2.removeinput()">`,

    };
});

This directive accesses the parent controller.

Display the text in this template---

angular.module('myApp')

.directive('listWrapperTitlebox', function() {
    return {
        restrict: 'E', // Element directive
        template: `
           <b  class ="card1" id ="cardtitle">{{task.title}}</b>
           <a class ="card1" tabindex="0" data-trigger ="focus"
              data-toggle="popover" 
              ng-click = "ctrl.listpopover($index)" >...</a>`
    };
});