I am facing an issue with sharing scope between two AngularJS controllers. In the first controller, I retrieve data from the server and store it in a scope variable called myData. This variable has multiple items but I only care about one particular item - myData.title. Now, in the second controller, I have a query scope that should be initialized with the value of myData.title from the first controller. However, even though myData.title has the correct value in the first controller, it appears as undefined in the second controller. Strangely enough, when I try to display the value using {{myData.title}} in the second controller, it shows up just fine. What could be causing this discrepancy?
My code snippets are as follows:
app.controller("Controller1",function ($scope, $http) {
$scope.myData = {
title:""
}
$scope.getData = function(){
if(marketerId != null){
$http.get('/getData')
.success(function(data, status, headers, config) {
$scope.myData = data;
})
.error(function(error, status, headers, config) {
console.log(status);
});
}
};
}
And for my second controller:
app.controller("Controller2",function ($scope, $http) {
$scope.query = "";
this.init = function (query) {
$scope.query = query;
}
}
And in my HTML page, the relevant code looks like this:
<div ng-controller='controller1 as c1'>
<div ng-controller='controller2'>
<input type='text' ng-model='query' ng-init='c1.init(myData.title)' >
</div>
</div>