I am having trouble understanding why the data is changing outside the directive in the external div. I expected it to behave the same as in the controller because the external Div is not wrapped in a directive or controller. Therefore, it should remain unchanged instead of being evaluated. Can someone please help me figure out why this is happening? Thank you.
(function(angular) {
angular.module('myApp', [])
.directive('myDirective', function() {
return {
link: function(scope) {
scope.dataFormDirective = "directiveData";
}
}
})
.controller('myCtrl', function($scope) {
$scope.data = "controllerData";
})
})(window.angular);<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="myApp">
<div>external div</div>
<div>controllerData: {{data}}</div>
<div>dataFormDirective: {{dataFormDirective}}</div>
</br>
<div ng-controller="myCtrl">
myCtrl
<div>controllerData : {{data}}</div>
<div>dataFormDirective:{{dataFormDirective}}</div>
</div>
</br>
<div my-directive>myDirective {{dataFormDirective}}</div>
</body>