AngularJS : Update Controller Scope from Another Controller/Scope

Question

Hopefully this hasn't been asked.. I looked around and haven't found anything yet.

I have a single view that provides the user with a modal dialog (wizard) to create a few things and then save them. It seems as if everything is working except for that the view uses an ng-repeat to list the items created and it doesn't update when new items are pushed into the list. Consider the following example.

app.service('Utils', function() {

});

function controller1($scope,Utils) {
    $scope.myList = [];

    Utils.add = function(obj) {
        $scope.myList.push(obj);
    }
};

function controller2($scope,Utils) {
    var temp = {"name":"John Doe"};
    Utils.add(temp);
};

This is extremely basic but it provides enough insight into what I'm doing. $scope.myList is shown in the view using ng-repeat. At some time, I display the wizard, go through the process of creating a new item, then push that item to the list. The add function is part of the Utils service that serves other purposes, but isn't necessary to outline them here. The add function is declared in the first controller and accessible via the second. The operation of creating the new item and pushing it into $scope.myList works fine. I can look at the $scope of the first controller and see that the variable contains a single new object, but the view never updates to show it.

Any thoughts on what would be causing the view to not update? Is there a better way to do this? I found the recommendation for using a service as an intermediary somewhere else but if there is a better way that would resolve this issue as well, I'm up for it.

Thanks for the link but.. weird thing is, I understand the concept and can go to jsfiddle and create code that works flawlessly every time, doing EXACTLY what I want but it refuses to work in my production code. Once again, if I set window.scope to $scope of the controller and look at it, the variable seems to be getting updated correctly, it just isn't updating the UI. Can't figure out what the issue is. JSFiddle has Angular 1.2.1 and I'm using 1.2.18 is the only difference I can see — dferg, Jul 01 '14 at 00:22
I found the issue with this. I am still using very little jQuery in some areas to keep from having to reinvent the wheel. In particular, I'm using the Bootstrap Application Wizard plugin. The HTML structure you create to outline the wizard is completely replaced with a custom Bootstrap Modal. That's where the problem comes in. I was trying to assign a controller to the wizard. When the page initialized, it was removed from the page, breaking the association with the controller. Spent way too much time banging my head on the desk over this.. *hangs head* — dferg, Jul 01 '14 at 03:16

score 0 · Answer 1 · answered Jun 30 '14 at 20:19

Not sure if this is what you're looking for or not:

http://jsfiddle.net/5QqQ6/

    var app = angular.module('itemsApp', []);

    app.factory('Items', function () {
        var list = [{
            name: 'Apples',
            color: 'Red'
        }];

        return {
            add: function (item) {
                list.push(item);
            },

            get: function () {
                return list;
            }
        }
    });

    app.controller('List1Ctrl', function ($scope, Items) {
        $scope.items = Items.get();
        $scope.new_item = {};

        $scope.addItem = function () {
            Items.add($scope.new_item);
            $scope.new_item = {};
        }
    });

    app.controller('List2Ctrl', function ($scope, Items) {
        $scope.items = Items.get();
    });

AngularJS : Update Controller Scope from Another Controller/Scope

1 Answers1