If you want to create directives that contain controllers inside and isolated scopes with two-way binding variables to share, here is an example:
JavaScript:
(function() {
var app = angular.module('myApp', []);
app.controller('main',['$scope', function($scope) {
$scope.sharedVar = 1;
}]);
app.directive('dOne', function() {
return {
scope: {
sharedVar: '='
},
controller: ['$scope',function($scope) {
$scope.changeVar = function(val) {
$scope.sharedVar = val;
}
}],
template: "<div>controller1<button ng-click='changeVar(3)'>clickMe!</button> value: {{sharedVar}}</div>"
};
});
app.directive('dTwo', function() {
return {
scope: {
sharedVar: '='
},
controller: ['$scope',function($scope) {
$scope.changeVar = function(val) {
$scope.sharedVar = val;
}
}],
template: "<div>controller2<button ng-click='changeVar(2)'>clickMe!</button> value: {{sharedVar}}</div>"
};
});
})();
HTML:
<body ng-app="myApp" ng-controller='main'>
<d-one shared-var="sharedVar"></d-one>
<d-two shared-var="sharedVar"></d-two>
</body>
Check out the plunker for a demonstration
Another option is to use the $parent scope:
View this plunker using $parent scope