Sometimes, when two variables refer to the same variable, they are not binding together like this:
var option = 1;
$scope.a = option;
$scope.b = option;
When you change $scope.a, $scope.b does not change. See this Plunker
However, sometimes they are binding together, for example it happens to me in a modal like this:
angular.module('plunker', ['ui.bootstrap']);
var ModalDemoCtrl = function($scope, $modal, $log) {
$scope.testDataArray = [{
"name": "Doe"
}, {
"name": "Deer"
}, {
"name": "Female"
}];
$scope.open = function(testData) {
var modalInstance = $modal.open({
templateUrl: 'myModalContent.html',
controller: ModalInstanceCtrl,
resolve: {
data: function() {
return testData;
}
}
});
modalInstance.result.then(function(selectedItem) {
$scope.scopeData = selectedItem;
}, function() {
$log.info('Modal dismissed at: ' + new Date());
});
};
};
// Please note that $modalInstance represents a modal window (instance) dependency.
// It is not the same as the $modal service used above.
var ModalInstanceCtrl = function($scope, $modalInstance, data) {
$scope.modalData1 = data;
$scope.modalData2 = data;
$scope.ok = function() {
$modalInstance.close($scope.modalData);
};
$scope.cancel = function() {
$modalInstance.dismiss('cancel');
};
};
See the Plunker. Here "modalData1" and "modalData2" are both referring to "data". In any modal of this Plunker, you change modalData1, then modalData2 changes with it.
Why it is like this??
Thank you!
