AngularJS Child controller data not loading on UI while using $emit to refresh Parent data

Question

I am using AngularJS 1.5 and using '$emit' to send an event to parent controller to refresh parent controller data. On '$On' I have written the logic to refresh the parent controller data.

Now, Parent controller data is being updated but after that it is unable to bind data for the child controller from where '$emit' was triggered.

I tried to use '$apply' but it is saying that '$digest' is already in progress. I have also use Batrang tool to view the data and it is showing that page having all those data but it is not being displayed on UI.

Can anybody tell me how to force angular to bind those data with HTML Control which is already available on the page.

I cannot put sample code here because it's a live project & I'll have to create a sample project to replicate the issue. Even though If it is not easy to answer my query without sample code then I will put sample code on Plunker in a day.

Answer 1

Based on Angular documentation, there are two methods to declare controller in HTML:

one binds methods and properties directly onto the controller using ng-controller="SettingsController1 as settings"

one injects $scope into the controller: ng-controller="SettingsController2"

The second option is more common in the Angular community, and is generally used in boilerplates and in this guide. However, there are advantages to binding properties directly to the controller and avoiding scope.

Using controller as makes it obvious which controller you are accessing in the template when multiple controllers apply to an element. If you are writing your controllers as classes you have easier access to the properties and methods, which will appear on the scope, from inside the controller code. Since there is always a . in the bindings, you don't have to worry about prototypal inheritance masking primitives .

So you could always refer to parent scope in child scope by using controller as :

<div ng-controller="parentController as parent">
    <span>{{parent.title}}</span>
    <div ng-controller="childController as child">
        <span>{{parent.title}}</span>
        <span>{{child.title}}</span>
    </div>
</div>