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

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>`
};
});