This is a complex question so I apologize for the complicated-sounding title.
Basically I have this situation:
I have a directive with
scope: false,
transclude: true
(I'll call this Directive1) Directive1's template references a second directive (Directive2) with an isolated scope into which I pass a variable that is two-way-bound using the '='. e.g.
pageTitle: '='
The variable I'm binding to that from Directive1 is on Directive1's $scope.
page-title="pageTitle"
OK, now, I have a controller (we'll call Controller1) that is embedded in the transcluded content from Directive1 that needs to change the value of pageTitle. Since the Directive1 has a shared scope I can easily read the value of $scope.pageTitle from within Controller1, however, when I attempt to change the value, it is not propagated down through the two-way binding of Directive2. This seems like something that should be possible, but I cannot figure out how.
However, if I create a new function in Directive1 like this:
$scope.changePageTitle(newTitle){
$scope.pageTitle = newTitle;
}
And call that function from within Directive2:
$scope.changePageTitle('Whatever I Want');
It does successfully change the value of the variable in Directive1 and Directive2.
Here is a jsfiddle with an example of the problem.
https://jsfiddle.net/aou5za7z/3/
Notice if you type a value in the first input box it only affects the Controller1 Value, however you can change the values in Directive1 and Directive2 by typing a value in the second input and hitting "Change Title"
Do I need to use the method workaround, or should there be a way to change the value in Directive2 from within Controller1 via the shared scope Directive1 and Controller1 both share?
Thanks for any help!
