Angular: Push item to list doesn't update the view

Question

When I push an item to an array, the view won't refresh the list.

table:

<tbody id="productRows">
    <tr data-ng-repeat="product in products | filter: search">
        <td>{{ product.Code}}</td>
        <td colspan="8">{{ product.Name}}</td>
    </tr>
</tbody>

form:

<form data-ng-submit="submitProduct()">
    Code:
    <br />
    <input type="text" required data-ng-model="product.Code"/>
    <br />
    <br />
    Naam:
    <br />
    <input type="text" required data-ng-model="product.Name"/>
    <br />
    <input type="submit" value="Opslaan" />
</form>

submitProduct in controller:

$scope.submitProduct = function () {
    console.log('before: ' + $scope.products.length);

    $scope.products.push({Code: $scope.product.Code, Name: $scope.product.Name});
    console.log('after:' + $scope.products.length);
    console.log($scope.products);

    $scope.showOverlay = false;
};

As you can see, I log the total items in the array and it behaves like I would expect. The only thing that doesn't do what I expect is the content of my table, that doesn't show the new value.

What do I have to do, so the new row is displayed in the table?

This [plnkr](http://plnkr.co/edit/UXvtEhNbiilRn6DjX93P?p=preview) with your code works fine? Are you defining $scope.products correctly? — Brett Postin, May 16 '13 at 14:17
What code is calling `submitProduct()`? If this code is running "outside" Angular, you'll need to call `$scope.$apply()` at the end of your `submitProduct()` method to cause Angular to run a digest cycle, which will cause your view to update. — Mark Rajcok, May 16 '13 at 14:48

score 5 · Answer 1 · answered May 16 '13 at 14:27

5

I can't see the rest of your code, but make sure $scope.products is defined in your controller.

See this example.

The only addition I made to the code you provided was:

$scope.products = [];

If this doesn't help then please provide more information.

answered May 16 '13 at 14:27

Brett Postin

11,215
10
60
95

Your solution worked for me. I had the same issue, where items where not being pushed to my $scope.lists.push({});. I declared $scope.lists = []; on the top and it worked like a charm. Thanks. – Mekey Salaria Mar 04 '15 at 09:20

score 5 · Accepted Answer · answered May 17 '13 at 11:46

5

Thanks for the answer and the comments. The problem was at another place. In my routeProvider I had declared a controller. I also had a ng-controller directive in my div. So my controller gets executed twice. When I removed the ng-controller directive, everything was just working as it should be :)

answered May 17 '13 at 11:46

Martijn

24,441
60
174
261

Thanks! , it also solved my problem, I declared a controller in the routeProvider while my body already had a ng-controller attribute. How did you know that was the problem ? – Daniel Flores Jun 12 '13 at 21:01
@DanielFlores Well, I look at my code from the beginning till the end. So I started with ap..module, app.routes, all the way to my view. And when I look at my view I noticed that I had declared the same controller twice: in my route and in my view. – Martijn Jun 13 '13 at 07:08
Thanks! This show my issue, too! :) I didn't user routeProvider, but I use the same controller in different div in the same page. And whenever i push something to the array, the controller reload, so I couldn't push anything. Thanks a lot! – fuiiii May 14 '14 at 18:39

Angular: Push item to list doesn't update the view

2 Answers2

Linked