Angular: moving an item to a list does not update the view

Question

When I click an element into an array, the view does not update 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> 

the 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> 

submit Product in the 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 am registering the resulting elements in an array, and it behaves as I expected. The only thing that does not do what I expect is the contents of my table, which does not display the new value.

What do I need to do so that the new row appears in the table?

Answer 1

Thanks for the reply and comments. The problem was elsewhere. In my routeProvider I declared a controller. I also had the ng-controller directive in my div. Therefore, my controller is executed twice. When I removed the ng-controller directive, everything just worked as it should :)

Answer 2

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

See this example .

The only addition I made for the code you provided is:

 $scope.products = []; 

If this does not help, please provide additional information.