Angular transcluded directive with two-way binding to controller not updating

Question

I am using this https://github.com/blackgate/bg-splitter for creating horizontal and vertical pane splitters. (The full code is in the plunkr I have created)

Since I started using it, I have an issue with the two-way binding of a controller and directive.

The directive has two variables, listData and the selectedOption:

template: '<select ng-model="selectedOption" ng-options="l.name for l in listData" class="form-control"></select>',
    scope: {
        listData: "=",
        selectedOption: "="
    },

The controller has these variables and has a watch function to watch for changes:

$scope.listdata = [{id : 1, name : "listitem1"},{id : 2, name : "listitem2"},{id : 3, name : "listitem3"}];

$scope.selectedOption = null;

$scope.$watch('selectedOption', function() {
        console.log('updating selected choice');
        console.log($scope.selectedOption);
}, true);

And the directive is being used like:

<dropdown list-data="listdata" selected-option="listItem"></dropdown>

Without the paneSplitter the dropdown is working. For some reason, when the bound variable is updated in the dropdown directive, it doesn't get updated in the controller. This is probably a scope issue, but I can't seem to figure it out myself. Any help is greatly appreciated. Please see the following plunkr with the full code:

http://plnkr.co/edit/UnJaPV8LYm3unILEU3Lq

Answer 1

Remember the famous quote: "If you are not using a .(dot) in your models you are doing it wrong?" If you change the watch to this:

$scope.$watch('data.listItem', function() {
        console.log('updating selected choice');
        console.log($scope.data.listItem);
}, true);

and in change the Html to this

<dropdown list-data="listdata" selected-option="data.listItem"></dropdown>

Here a Plunker