View not updating after form submit

Question

my ng-repeat is not updating after attempting to add an item to scope.

Here is my html:

<div class="col-lg-12">
    <div class="panel-group" id="accordion">
    <div class="panel panel-collapse panel-default" id="topPanel">
            <div class="panel-heading" data-toggle="collapse" data-target="#top-action-panel-body">
                <h4 class="panel-title">
                    Collapsible Group Item #1
                </h4>
            </div>
            <div id="top-action-panel-body" class="panel-collapse collapse">
                <div class="panel-body">
                    <form class="ih_enterprise_api_stock_item_new form-horizontal form-stock-item-add" ng-submit="test()" ng-controller="InventoryAddCtrl" id="ihenterprise_logisticsbundle_stockItem">
                        <div class="form-group">
                                <label class="col-sm-4 control-label control-label required" for="ihenterprise_logisticsbundle_stockItem_name">Name</label>
                            <div class="col-sm-8">
                                    <input type="text" id="ihenterprise_logisticsbundle_stockItem_name" name="ihenterprise_logisticsbundle_stockItem[name]" required="required" maxlength="255" ng-model="formData.name" class="form-control form-control">
                            </div>
                        </div>
                        <div class="form-group">
                                <label class="col-sm-4 control-label control-label required" for="ihenterprise_logisticsbundle_stockItem_itemNo">Item no</label>
                            <div class="col-sm-8">
                                    <input type="text" id="ihenterprise_logisticsbundle_stockItem_itemNo" name="ihenterprise_logisticsbundle_stockItem[itemNo]" required="required" maxlength="255" ng-model="formData.itemNo" class="form-control form-control">
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-4 col-md-offset-4">
                                <input type="submit" class="btn btn-success" value="Tilføj">
                            </div>
                        </div>

                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="col-lg-12" ng-controller="InventoryListCtrl">
    <div class="panel panel-default" style="color: black; text-align: left">
        <div class="panel-heading">
            <h3>Lager liste</h3>
        </div>
        <div class="panel-body table-responsive">
            <table class="table table-condensed table-expanding">
                    </table><table class="table table-condensed table-expanding">
        <thead>
        <tr>
            <th>&nbsp;</th>
            <th>Id</th>
            <th>Created At</th>
            <th>Navn</th>
        </tr>
        </thead>
        <tbody>
        <tr ng-repeat-start="stockItem in stockItems" data-toggle="collapse" data-target="#stockItem_{{stockItem.id}} " class="accordion-toggle">
            <td>
                <button class="btn btn-default btn-xs"><span class="glyphicon glyphicon-eye-open"></span></button>
            </td>
            <td>{{stockItem.id}} </td>
            <td>{{stockItem.created_at}} </td>
            <td>{{stockItem.name}} </td>
        </tr>
        <tr ng-repeat-end="">
            <td colspan="6" class="hiddenRow">
                <div class="accordian-body collapse" id="package_{{stockItem.id}} ">
                    test
                </div>
            </td>
        </tr>
        </tbody>
    </table>

        </div>
    </div>
</div>

Here is my code: App.js

'use strict';

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

angular.module('cmfApp.controllers', []);

InventoryRouting.js

angular.module('cmfApp').config(function($routeProvider){
    $routeProvider.
        when('/inventory', {
            templateUrl: Routing.generate('ih_enterprise_user_dashboard_inventory'),
            controller: 'InventoryListCtrl'
        })
});

InventoryController.js

angular.module('cmfApp').controller('InventoryAddCtrl', ['$scope', '$http', '$timeout', function($scope, $http, $timeout){

    $scope.submit = function() {
        var postData = {
            ihenterprise_logisticsbundle_stockItem: {
                name: $scope.formData.name,
                itemNo: $scope.formData.itemNo
            }
        }

        $http({
            method  : 'POST',
            url     : Routing.generate('ih_enterprise_api_stock_item_new'),
            data    : $.param(postData),  // pass in data as strings
            headers : { 'Content-Type': 'application/x-www-form-urlencoded' }  // set the headers so angular passing info as form data (not request payload)
        })
        .success(function(data) {
            // the code you want to run in the next digest
                $scope.$apply(function(data){
                    $scope.stockItems = $scope.stockItems.concat(data);
                });

            //console.log($scope.stockItems);
        }).error(function(error) {
            console.log(error);
        });
    };

    $scope.test = function() {
        console.log("here");
        $scope.stockItems.push({
            id: 1000,
            name: 'potato',
            created_at: '1111'
        });
        console.log($scope.stockItems);
    }

}]);

Ignore the HTTP request, i was thinking it was a HTTP related issue, but it seems much more fundamental, as i attempted to just insert a plain object on submit.

Answer 1

You seem to be instantiating the InventoryListCtrl twice: Once in the route definition, and again in the HTML template. As a result, when you update the stockItems array, it's not updating the same array used in the view.

Try removing the ng-controller="InventoryListCtrl" from the template.

This will make InventoryListCtrl be the controller for the entire HTML template (b/c of the route definition). InventoryAddCtrl is used inside the template and it will inherit the scope of InventoryListCtrl. So when you update $scope.stockItems from either controller, you'll now be updating the same object.