Get value from Directive into Controller - angularjs

Question

So I have this filter directive:
app.directive('filter', function(){
return {
restrict: 'E',
transclude: true,
scope: {
callFunc: '&'
},
template:
' <div>' +
' <div ng-transclude></div>' +
' </div>',
controller: function($scope, $element, $attrs){
this.getData = function() {
$scope.callFunc()
}
}
}
});
app.directive('positions', function(){
return {
require: '^filter',
scope: {
selectedPos: '='
},
template:
' Positions: {{selectedPos}}' +
' <ul>' +
' <li ng-repeat="pos in positions">' +
' {{pos.name}}</a>' +
' </li>' +
' </ul>',
controller: function($scope, $element, $attrs){
$scope.positions = [
{name: '1'},
{name: '2'},
{name: '3'},
{name: '4'},
{name: '5'}
];
$scope.selectedPos = $scope.positions[0].name;
$scope.setPosition = function(pos){
$scope.selectedPos = pos.name;
};
},
link: function(scope, element, attrs, filterCtrl) {
scope.posRegData = function() {
filterCtrl.getData();
}
}
}
})
And the controller:
app.controller('keyCtrl', ['$scope', function($scope) {
var key = this;
key.callFunc = function() {
key.value = key.selectedPos;
console.log(key.selectedPos)
}
}]);
The main question is why the key.selectedPos in the controller get's the right value only on the second click?
Here is a plunker replicating my issue.

Answer 1

You can send a param when you call your callFunc().
Update your func in the ctrl: key.callFunc = function(filterParams), also don't forget to update you passed method call-func="key.callFunc(filterParams)
In filter directive change your getData method to:
this.getData = function(val) {
$scope.callFunc({filterParams: val})
}
In positions directive pass the value that you need:
scope.posRegData = function() {
filterCtrl.getData({position: scope.selectedPos});
}
Now in your keyCtrl you can get the value:
key.callFunc = function(filterParams) {
key.value = filterParams.position;
console.log(filterPrams.position)
}
Here is a working plunker

Answer 2

As suggested, I think an isolated scope works:
app.directive('positions', function(){
return {
require: '^filter',
scope : {
selectedPos: '='
},
template:
'<button dropdown>' +
' {{selectedPos}}' +
' <ul class="dropdown-menu">' +
' <li ng-repeat="pos in positions">' +
' {{pos.name}}</a>' +
' </li>' +
' </ul>' +
'</button>',
controller: function($scope, $element, $attrs){
$scope.setPosition = function(pos){
$scope.selectedPos = pos.name;
};
$scope.positions = [
{name: '1'},
{name: '2'},
{name: '3'}
];
$scope.selectedPos = $scope.positions[0].name;
}
}
});
See:http://plnkr.co/edit/boKjmMmsCCZem0lETT3B?p=preview

Answer 3

You can use $broadcast on the $rootScope
in your controller do:
$rootScope.$broadcast('myEvent', $scope.selectedPos);
in your target controller you then have a listener:
$scope.$on('myEvent', function(event, myData){...})
angularJS documentation $on
and a plunker