As the title says am trying to change scope variable from directive and from my controller. But it cannot change the value from controller/directive, here is a jsfiddle
If you click Change
button it will change both scope variables from controller.
Then when clicking changed from controller
button (which is now the directive), it will change drop
variable but not the select
variable and Change
button cannot change the variable again.
I have also tried to pass the variable as described here but with no success.
Directive :
app.directive("drop", [function() {
return {
scope: true,
restrict: 'A',
link: function(scope, element, attrs) {
return element.bind('click', function(e) {
scope.drop = "changed to drop";
scope.select = "changed to select";
scope.$apply();
});
}
};
}]);
controller:
function myController($scope) {
$scope.drop = "Initial value";
$scope.select = "Initial Value";
$scope.selection = function() {
$scope.drop = "changed from controller";
$scope.select = "changed from controller";
};
}
Edit:
More testing shows that when changing the scope variable in directive, then controller cannot change it anymore..