Synchronize objects across $scope without a service - asp.net-mvc

Question

I am trying to get a piece of code to work where I don't have total control over half of the code. In short, there is 1 main controller that has an object that is then obtained from a second controller. When main controller 1 updates the object, controller 2 never sees it. I think this is because the 2 controllers aren't watching the object/properties (copies?). If you notice, the Angular Binding to {{Title}}, this is where the issue is visible as the "Title" never gets updated in the second controller.
Here is some sample code that shows the problem. Currently, the code does a 3 seconds loop to get the object again, and reassign it to the second controller.
The code here I can't really touch. I have source, but it spaghetti and I am just generalizing what is here.
// html I can't really change, outside my world.
<div id="mainApp" ng-app="MainApp" ng-controller="mainController">
</div>
// code I can't "really" change, non-angular (can't use $http).
$ajax(get...)
.success(function (result) {
$('#element').html(result);
})
The code below is fairly separated and I can tinker with it. The HTML is returned from a service called by the $ajax call above.
// code I can change (the "result", or html returned from the service)
// containerController.js
var containerController = function ($scope, $timeout) {
$scope.models = {
item: null;
}
$scope.getItem = function() {
var mainAppScope = angular.element($('#mainApp')).scope();
$scope.models.item = mainAppScope.GetItem();
}
$scope.getItem();
// HACK WORK AROUND
// Get the item from the mainController.
var itemSync = setInterval(function () {
$scope.getItem();
$scope.$apply();
}, 3000);
}
The HTML returned from the service (it's really an ASP.NET MVC Partial View)
// HTML
<div id="container" ng-app="containerApp" ng-controller="containerController">
<!-- This will bind the first time, but won't syncronize when other controller updates -->
<!-- the controller is currently doing a loop to do so, not good. -->
<div>{{models.item.Title}}</div>
</div>
<script type="text/javascript" src="~/Scripts/controllers/containerController.js"></script>
<script type="text/javascript">
// This will inject the controller and new app into angular.
var container = document.getElementById('container');
var containerApp = angular.module('containerApp', []);
containerApp.controller('containerController', ['$scope', containerController]);
angular.bootstrap(angular.element(container), ['containerApp']);
</script>

Answer 1

You could change hacky part to use $interval which will manage to run digest cycle after each interval
var itemSync = $interval(function () {
$scope.getItem();
}, 3000);
To sync object from parent controller to child controller you could use object structure of model, that will is nothing but Javascript prototypal & will update data.
$scope.pageData = {}; //declare this in parent controller
$scope.pageData.title = 'Title 1' //use this where you want to change in child controller