AngularJS not updating view after $broadcast

Question

I know I'm not the first who has this problem but no solution over here helped me to solve it.

I've two controllers a ShowController and a CreateController. I want to broadcast from the ShowController and receive in the CreateCrontroller. To do so I'm using a BroadcastService. Everything works as expected. Due to a click-event the ShowController saves data to the service broadcast the event and the CreateController receives the event an the data. Dependent on the data I want to activate a tab one the view which was initiated by the CreateController. After setting the $scope variables in the on-method they are changing but the view is not updating itself.

I've tried to wrap the $broadcast and as well the $on methods in a $timestamp to force the $apply. I also tried the $apply after the $scope variables were set and I tried to set the $scope variables in an anonymous function in the $apply. Non of these solution worked for me. I'm obviously missing something.

EDIT The fiddle attached is working but there is not the problem. Both controllers have a parent controller. If I check the $scope in the child controllers the new data is added BUT if I checkt the parent controller the $$childTail with the child data did not changed. So the broadcast works. The problem is within the controller structure or scope-inheritance.

Why does the view listen to the parent controller even if the variable is not initiated and changed in the parent controller?

EDIT 2 As far as I tried to locate the issue I think I found one problem.If I try to broadcast from show controller to the create controller. The create controller isn't initialized yet. After I try it a second time the broadcast works. But still the variables doesn't change in the view! See this working plnkr to analyze the issue. I try to change the variable via broadcast from the show to the create controller. If you check the scope in the create controller the variable changed but in the parent scope it didn't.

    angular.module('module.service')
      .factory('SharedFactory',['$rootScope', '$timeout', function ($rootScope, $timeout) {
        var sharedService = {};

        sharedService.message = '';
        sharedService.data = {};

        sharedService.prepForBroadcast = function(event, data) {
          this.event = event;
          this.data = data;
          this.broadcastItem();
        };

        sharedService.broadcastItem = function() {
          $timeout(function() {$rootScope.$broadcast('updateShared');});
        };

        return sharedService;

      }]);


    // controller 1

     $scope.functionName = function(data) {
         // tried this as well with and without the $timeout
        $timeout(function() {
          SharedFactory.prepForBroadcast('bookResources', {data:data});
        }, 0);
         // ui-router changes state / view
         $timeout(function() {
           $state.go('create');
         }, 1);
        };

    // controller 2

    $rootScope.$on('updateShared', function() {
        // first attempt
      $timeout(function() {
        $scope.variable.data = SharedFactory.data; // updating in controller but not in view
       }, 100);
        // seconde attempt
       $scope.$apply(function () {
         $scope.variable.data = SharedFactory.data; // updating in controller but not in view
       });
    });

<ol>
    <li data-ng-repeat="phase in array">
        <span data-ng-repeat="com in phase.array">{{com.type}}
            <span data-ng-click="functionName(phase)">        {{com.var1}}/{{com.var1}}
            </span>
        </span>
    </li>
</ol>

I've updated the fiddle and the code. Could it be a problem of parent and child scope? To avoid that I'm setting a proberty of an object in the on method not an object or array itself. — Marc Radziwill
i've added the working fiddle. please see the edit. the fiddle is not the problem. — Marc Radziwill

Divya MV Divya MV · Accepted Answer · 2015-02-06T12:11:36

check if the $on service is triggering.
check if SharedFactory.data has the updated value inside the $on function.
and you can type this in console to check the createControllers scope expand the scope object and see whether the variable that holds your data has the new data..

angular.element('[ng-controller=createController]').scope()

AngularJS not updating view after $broadcast

1 Answers